1：v-model的原理

v-model其实是一个语法糖，在一个input上面绑定v-model

<input  v-model="value" />

编译后变成如下代码：

<input :value="propValue" @input="propValue=$event.target.value" />

如上代码我们可以看出来v-model的原理其实就是将propValue 绑定给input的value值，同时监听input事件，将当前节点的value值赋值给propValue。

2：v-model在组件上的应用

首先要了解一点，当v-model用在组件上时，编译出来的代码如下：

<child-component :value="propValue" @input="propValue=$event" ></child-component>

如上代码可以看出，如果要实现组件上的双向绑定，只需要子组件发送一个input事件即可。

例子：

html代码：

JavaScript代码：

从上面的例子可以看出

组件上使用v-model，需要在子组件prop中定义一个value属性，当value的值变化时，只需要发送一个input事件即可。

但是这种方法在子组件中props属性必须是value才可以，所以vue提供了model这个属性来解决这个问题

从以上代码可以看出，只需要在子组件中定义model对象，这个对象中定义prop和event字段即可。

需要注意,即使在model中定义了mesg属性，也需要在props中再声明一次。