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>
青云直上三千码