父子组件通信时,常规的传值操作是,父组件通过props向子组件传递参数和修改该参数的方法,由于子组件不能直接修改父组件传递过来的,需要由子组件触发($emit)父组件传过来的方法,让父组件修改对应的参数,从而使子组件的视图更新。
这个过程,如果用.sync来完成,会简化操作
//父组件
<demo-view-a
:passData="passData"
@update:passData="changeData"
/>
...
methods: {
changeData(val) {
this.passData = val;
},
},
//等价于
<demo-view-a
:passData="passData"
@update:passData="
(val) => {
passData = val;
}
"
/>
//等价于
<demo-view-a :passData.sync="passData" />
//子组件
<button @click="$emit('update:passData', '子组件改了')">更改passData</button>