.sync修饰符

129 词

.sync 修饰符#

作用:可以实现子组件与父组件数据的双向绑定,简化代码,作用与v-model一致
特点prop属性名,可以自定义,非固定为valuev-model固定使用value可读性不高
场景:封装弹框类的基础组件,visible属性 true 显示 false 隐藏
本质:就是:属性名@update:属性名合写
父组件(使用):

1
2
<BaseDialog :visible.sync="isShow"></BaseDialog>
<BaseDialog :visible="isShow" @update:visible="isShow=$event"></BaseDialog>

子组件(封装):

1
2
3
4
5
6
7
8
props:{
visible:Boolean
},
methods:{
close(){
this.$emit('update:visible',false)
}
}