Vue .sync修饰符与this.$emit(update:xxx)

.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)时 ,驼峰法 和 - 写法都可以,而且也不需要与父组件保持一致。

上一篇:Go-竞态条件-锁


下一篇:Vue.sync修饰符与this.$emit('update:xxx', newXXX)