深入聊聊Vue指令 v-model

首先，v-model可以理解为 Vue团队提供的一个语法糖，他的实现原理其实是 v-bind和input事件的结合。

首先我们给一个 input 添加两个属性

运行之后发现和 v-model 的效果一样也实现了双向的数据绑定。

接下来再聊深一点

我们知道，如果往input上绑定v-model回实现数据的双向绑定，那么如果我们给组件绑定 v-model呢？

我们先用 v-bind和input事件绑定在组件中试试

要注意的是，这里的value并不是input表单的value属性，他是绑定在组件上的，是一个自定义属性，
同理 input也并不是 input原生事件，而是一个自定义事件，

再之前的文章中有聊过，绑定在组件上的自定义事件，只能通过子组件的 $emit来触发，所以在子组件内，我们添加如下代码

注意，这里的value为 input表单的属性，input为DOM的原生事件

然后我们运行代码发现，父子组件的数据实现了双向绑定

这时我们再修改父组件内的属性 将value和input事件替换为 v-model

发现数据双向绑定仍然可以实现

总结：
1. v-model实现的原理其实就是 :value和input事件。
2.v-model并不是只能绑定在表单元素上，也可以绑定在组件标签上，如果绑定在组件标签上，可以实现父子组件数据的同步也可以理解为父子组件的通信。