Skip to content

sync修饰符的实现与使用

.sync语法糖扩展

对父子组件的值进行双向绑定,可用于频繁变动的值,例如dialog的显示隐藏

html
// 父组件
<diy-dialog :isShow.sync="show" />  // 注意:isShow和show最好不一样,否则无效,这是个巨坑
// 语法糖扩展为
<my-component  :isShow="show"  @update:isShow="(newValue) => isShow= newValue" >

// 子组件的写法
this.$emit('update:isShow', true || false)

坑:update:isShow 中间禁止空格,否则无效