我们来手动实现一个v-model函数。准备工作首先定义一个组件组件，其中包含一个模板。constCompOne={props:['value'],template:`
`,}然后定义一个vue对象，它引用组件。newVue({components:{CompOne,},template:`
`,}).$mount(root)好了，准备工作完成。实现constCompOne={props:['value'],//接收父组件模板传过来的数据：`
//添加一个输入事件//接收父组件传过来的值
`,methods:{handleInput(e){this.$emit('input',e.target.value)//通过$emit，值变化时通知父组件}}}newVue({components:{CompOne,},data(){return{value:'vue'}},template:`
//valueispassedtothechildcomponentData//@input接收子组件通过$emit传递的参数
`,}).$mount(root)的效果就做好了，我们就实现了v-model的功能了！默认情况下，组件上的v-model将使用值作为属性，将输入作为事件。但是单选按钮、复选框等类型的输入控件可能出于不同的目的使用value属性。模型选项可用于避免此类冲突。newVue({components:{CompOne,},data(){return{value:'vue'}},template:`
//使用v-model满足语法糖规则：属性必须是value，方法名必须是：input
`,}).$mount(root)//修改子组件constCompOne={props:['value1'],model:{prop:"value1",//接收到的数据value=>value1event:"change"//$emit需要绑定的事件input=>change},template:`
`,methods:{handleInput(e){this.$emit('change',e.target.value)}}}这样会让v-model更加灵活，属性和方法名可以自定义。总结一下，v-model是一个语法糖，它做了：绑定数据值触发输入事件inputdata更新触发重新渲染
