【VUE】自定义组件如何实现双向绑定 | 父组件和子组件双向数据传递

比如说需要实现下面红色标记地方的功能：
（1）鼠标双击紫砂壶文本，那么会出现input输入框；
（2）点击回车会实现将用户改变之后的标签名渲染到前端。

既然是双向绑定，那么我们这个案例就是父组件和子组件相互传值的过程。比如父组件修改则子组件对应更新，子组件修改则父组件对应更新。我相信这个过程许多初学者都很懵，尤其是不知道修改什么更新什么，是视图？还是数据？

那么接下来，我用上面那个案例进行讲解。

父传子：数据一定是由父组件（app.vue)传递给子组件(components中的vue文件)，app.vue提供数据=》对应到子组件的渲染功能.

图1 父传子

子传父：视图中前端用户对数据的修改，要同步到父组件的数据中

图2 子传父

相信你们通过这个案例已经明白了父组件和子组件相互传递数据的过程，尤其需要注意的是：

数据源自父组件；

父组件负责提供原始数据 —对应— 子组件负责对父组件传递的数据进行渲染；（对应图1）

子组件修改前端输入框中的值— 对应— 父组件的数据；（对应图2）