v-model-90

v-model实现的原理是什么？

v-model的原理简单描述

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

v-model是什么

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

为什么使用v-model

v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

v-model在组件中如何使用？

v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。

具体做的事情就是通过$event这个事件对象获取到最新的输入域的值，然后把最新的值赋值给旧的值，从而进行数据的更新。这样的话就完成了双向数据绑定。

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1、v-bind绑定一个value属性；

2、v-on指令给当前元素绑定input事件。

v-model在组件中如何使用。

实现点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。

<!-- 父组件 --> <template> <p class="parent"> <p>我是父亲, 对儿子说： {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child> </p> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child } } </script>。

<!-- 子组件 --> <template> <p class="child"> <p>我是儿子，父亲对我说： {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </p> </template> <script> export default { props: { give: String }, model: { prop: 'give', event: 'returnBack' }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } } } </script>。

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。by三人行慕课。

原文地址：http://www.qianchusai.com/v-model-90.html