Vue组件双向绑定如何改写为长尾？

本文共计878个文字，预计阅读时间需要4分钟。

场景：我们比较常用的父子组件之间的交互方式：

1.父组件通过props将数据流进入子组件；

2.子组件通过$emit将更新后的数组发送给父组件；

3.今天，我们通过另一种方式实现交互，参考i。

场景：

我们比较常用的父子组件之间的交互方式：
父组件通过props将数据流入到子组件；
子组件通过$emit将更新后的数组发送的父组件；

今天，我们通过另一种方式实现交互，参考input框的v-model，实现自定义组件的双向数据绑定。
即：父组件值改变，子组件的值跟着改变；反之，子组件值发生变化，父组件值随之变化

子组件定义：

由于不能直接修改props属性值，我们这里定义valueData，通过监听实时接收value值，通过click方法修改valueData。
这里注意model语法糖prop 是接收的props属性value，保持一致。event是先上传递的事件名。