Vue中的双向数据绑定v-model的实现原理

个人网站: 【紫陌】【笔记分享网】
想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

数据双向绑定？

      Vue中使用v-model可以实现表单元素和数据之间的双向绑定，即修改表单的值，data中对应变量的值也会被修改。在data对应变量中修改值，被绑定的表单值也会被修改；所以称之为双向绑定。但是为什么这个指令就可以实现数据的双向绑定呢？其实v-model是vue的一个语法糖。即利用v-model绑定数据后，既绑定了数据，又添加了一个input事件监听。

实现原理：

• v-bind绑定响应数据
• 触发input事件并传递数据

模拟一个表单的v-model

 

{{msg}}

原生DOM当中是有oninput事件，他经常是结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出一次回调

Vue2：可以通过value和input事件实现v-model功能

深入学习v-model：实现父子组件数据同步

模拟一个组件上的v-model

组件上使用v-model可以实现父子通信

父组件：

子组件：

这样的话就可以在父组件改msg数据子组件也会跟着改数据，反而言之，子组件input数据也影响父组件数据，实现父子组件数据双向绑定。