v-model仅仅是一个语法糖。
<input type="text" v-model="msg" />上面一行代码是v-model非常常用的一种形式，它等同于下一行代码，就是下一行代码的语法糖。
<input v-bind:value="msg" @input="msg=$event.target.value" />所以，实际上v-model的实现，第一步是通过v-bind绑定value值，第二步通过触发input事件，传递数据。 v-model在组件中使用，如下图代码所示：
<div id="app"> <my-com v-model="msg"></my-com> <!--这一行代码和上一行代码执行效果一样，是上一行代码的语法糖--> <my-com :value="msg" @input="msg=arguments[0]"></my-com> {{msg}} </div> <script> Vue.component('my-com',{ props:['value'], // 传value值的原因是v-model默认绑定了value属性，而使用input事件的原因是组件绑定的是input事件 template:` <div> <input :value="value" @input="$emit('input',$event.target.value)" /> </div> ` }) var vm = new Vue({ el:'#app', data:{ msg:'cc' } }) </script>