收起左侧

[前端] Vue .sync修饰符与this.$emit(update:xxx)

0
回复
[复制链接]
avatar
  • TA的每日心情
    qdsmile开心
    2024-7-3 19:57
  • 签到天数: 10 天

    [LV.3]偶尔看看

    1

    主题

    0

    帖子

    41

    积分
    发表于 2023-6-28 16:46:28 | 显示全部楼层 |阅读模式
    .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)时 ,驼峰法 和 - 写法都可以,而且也不需要与父组件保持一致。



    您需要登录后才可以回帖 登录 | 立即注册 QQ登录

    本版积分规则