vue如何实现一个自定义组件的v-model，v-model原理解析！

v-model指令的原理是什么？

1. v-bind绑定一个value属性
2. v-on监听当前元素的input事件，当数据变化时，将值传递给value实时更新数据

v-model和v-bind:value有什么区别？

自定义组件中，必定会使用v-bind指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我一直有个疑惑， 既然有的v-bind指令，为什么还需要在自定义的组件中实现v-model指令呢？在我实践了一番之后，我才明白， v-model既能够实现值的传递，也能够实现页面数据的实时变化，而v-bind只是实现值的传递，如果需要实现实时变化的效果， 需要使用另外的方法修改变量的值，可以总结为下面两点

1. v-model实现视图和数据的双向绑定，一者变化另一者也会同时变化
2. v-bind只会在初始化的时候将数据绑定到视图上，后续视图变化不会影响数据

现在我们来撸一个自定义的v-model

父组件

子组件

效果