TA的每日心情 | 开心 2024-7-3 19:57 |
---|
签到天数: 10 天 [LV.3]偶尔看看
|
.sync修饰符的作用Vue中的数据是单向数据流:父级 prop 的更新会向下流动到子组件中,但是反过来则不行,即子组件无法直接修改父组件中的数据。
但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。
不使用.sync修饰符的写法父组件代码: <biz-system-detail :is-show="detailVisible" @update:isShow="func"></biz-system-detail>
methods中的方法: func (val) { this.detailVisible = val }
子组件中的方法:onClose () { this.$emit('update:isShow', false) }
注意:this.$emit()中update后的字段要与父组件中保持一致
使用.sync修饰符的写法父组件 <biz-system-detail :is-show.sync="detailVisible"></biz-system-detail>
子组件中onClose () { this.$emit('update:isShow', false) // 或者如下也可以 this.$emit('update:is-show', false)}
即:使用sync修饰符与 $emit(update:xxx)时 ,驼峰法 和 - 写法都可以,而且也不需要与父组件保持一致。
|
|