vue中 .sync 的作用

 

我们使用 vue 编写弹框组件的时候，想要关闭弹窗时往往会写个关闭的方法，子组件$emit，父组件里还要加 @xxx="xxxxx"， 非常的不优雅，现在使用 .sync 就非常方便优雅地控制弹窗显示和隐藏了。

 

父组件：

<myModal :show.sync="modalShow" />
//编译时会被扩展为
<myModal :show="modalShow" @update:show="val => modalShow = val" />

可以看出来，.sync 其实就是一个语法糖

子组件：

// 子组件可以通过$emit 触发 update 方法改变
<div  @click="$emit('update:show', false)">关闭</div>