Vue自定义组件实现v-model指令

Tips: 本文所描述的Vue均默认是Vue2版本

在我们初次接触Vue的时候，一定会了解到一个语法糖，那就是v-model指令，它带给我们的第一印象就是它可以实现双向绑定

那么，什么是双向绑定？通俗一点来说，就是当数据发生变化的时候，视图同时发生变化，这可以说是Vue的精髓之处了
（不过关于双向绑定，后续可以出一篇更为详尽的博文来深入模拟一下Vue的实现，这里重点还是探讨实现自定义组件的v-model指令）

所以，在我们深入使用Vue之后，编写一个自定义组件，如何手动实现一个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

看到这里，相信你也理解了为什么我们会需要在自定义的组件中自定义一个v-model指令，下面我们通过一个简易的示例来撸一个v-model，
在此之前我们需要在一个空Vue项目中，定义一个dad.vue文件，以及child.vue文件。
为了方便初学者学习，我将一个完整的简易示例项目放到了github仓库中供大家下载学习，
大家如果喜欢可以为了点一颗Star，Thanks?(?ω?)?！！！

dad.vue

child.vue

参考文档一 ———— vue自定义组件中的v-model
参考文档二 ———— Vue中v-model和v-bind:value的区别以及手动实现v-model
参考文档三 ———— Vue官方文档关于$emit的说明

我是 fx67ll.com，如果您发现本文有什么错误，欢迎在评论区讨论指正，感谢您的阅读！
如果您喜欢这篇文章，欢迎访问我的 本文github仓库地址，为我点一颗Star，Thanks~ ??
转发请注明参考文章地址，非常感谢！！！