小编给大家分享一下Vue中v-model指令的原理分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到永济网站设计与永济网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟空间、企业邮箱。业务覆盖永济地区。

vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,

我们来看一下它的效果:

输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化

我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本

我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的

如此神奇的效果是如何实现的呢? 还是参照官方文档

http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

1. v-bind:绑定响应式数据

2. 触发 input 事件 并传递数据 (核心和重点)

现在我们也想设计自己的表单组件,也想通过 v-model暴露组件的值,怎么做呢?

例如我们要设计一个 自定义货币输入的组件, 通过 v-model暴露组件的值,我们可能使用如下的组件代码

然后再使用 这个我们自己定义的组件时, 组件内部会暴露出 组件的值到 v-model所绑定的值中去;那它是如何实现的呢?\

要搞明白v-model的实现,需要通过查看官方的自定义v-model组件示例的部分代码来进行说明

我们看上图中的代码,有行  $emit的代码,这行代码实际上会触发一个 input事件, 'input'后的参数就是传递给v-model绑定的属性的值,也就是说 v-model实现自定义的数据绑定的原理是这样的:

首先,大体的组件结构:

   ??
   ?? 
也就是自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)
然后,给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入到myattr中.
这里有个疑问,为什么是 'input'呢??? 三个字,看文档!
这个就是 vue对 v-model实现的一个规则: 使用了v-model的组件会
自动监听 input 事件,并把这个input事件所携带的值 传递给v-model所绑定的属性!这样组件内部的值就给到了父组件了
通过以上讲解,我们总结一下如何利用v-model实现自定义的表单组件:
监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit('input' ,data) 方法去触发 input事件 
以上是“Vue中v-model指令的原理分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
            
            
                                

                    本文名称：Vue中v-model指令的原理分析                    

                    分享链接：http://chengdu.cdxwcx.cn/article/pgohgd.html
                
            
        
        
        
        

            
其他资讯
            

                

                    

                            
                                
阿里巴巴大规模神龙裸金属Kubernetes集群运维实践
                            
                        

                            
                                
Java基础将Bean属性值放入Map中的实例
                            
                        

                            
                                
Mysql导入导出数据库和添加修改字段的相关命令
                            
                        

                            
                                
php超出内存的解决方法
                            
                        

                            
                                
Python有哪些相关面试题
                            
                        
                
            
        
        
        

    










    

        
QQ咨询
        

            
在线咨询
        
        
官方微信
            

        
        
联系电话
            

                
座机028-86922220
                
手机13518219792
            
        
        
返回顶部