vue父子组件双向绑定数据

我们在封装组件时，最常使用的父子组件通信方法是props传值，$emit修改，在一些情况中这些必要的操作会显得很麻烦，显得代码很啰嗦，甚至不利于某些功能实现。父组件必须传入值、触发事件，子组件必须接收值、触发事件调用$emit回调。

这种情况下可以使用.sync修饰符双向绑定数据，使子组件可以直接修改绑定数据。代码如下：

父组件：

<view :data.sync="Data"></view>

 

子组件：

this.$emit('update:data', Data)

 

使用.sync修饰符与原来传值方法只有两处区别，父元素传值属性后的修饰符.sync和子组件$emit('updata:~')，这样可以简略一些操作步骤，使得代码看起来更清新简洁。