.sync修饰符

.sync修饰符

1.作用 可以实现子组件与父组件数据**的双向绑定，简化代码

简单理解:子组件可以修改父组件传过来的props值

2.场景 封装弹框类的基础组件， visible属性true显示false隐藏

特点:prop属性名，可以自定义，非固定为value

3.本质 .sync修饰符就是:属性名和@update:属性名合写

.sync(有语义)

:属性.sync='数据' 相当于

：属性=“数据“ + @update：属性="数据=$event"

相当于

v-model中的value不具有语义，要使其有语义写成 ：属性名=" 数据" @update:属性名=" 数据"

来替换原来的 ：属性名="数据" @input="数据"

App.vue

HeaderComp.vue

用.sync修饰符简化

只需将App.vue中的子组件标签写成