vue 在子组件中更新父组件中传过来的变量——.sync 和 $emit(update:xxx)

这篇博客介绍了在Vue中如何通过.sync修饰符和$emit('update:xxx')的组合实现子组件对父组件props的双向绑定。文章通过示例代码展示了如何在子组件中更新从父组件传递过来的变量,从而避免直接修改props导致的错误。同时,对比了使用watch方法的实现方式,并强调在开发中应尽量减少使用watch。
摘要由CSDN通过智能技术生成

众所周知,vue 是单向数据流,所以子组件中不能直接修改 props 里的父组件传过来的属性。可有时候我们可能需要对一个 prop 进行“双向绑定”——换言之,要在子组件中更新从父组件中传过来的变量。

这就需要用到 .sync 修饰符 + $emit(update:xxx) 的组合语法

举个栗子:(该案例中用到了 Vant 第三方 ui 库)

// 父组件中调用子组建
<Child :isShow.sync='isShow'/>

// 子组件中
<template lang="pug">
  van-popup.popup-menu(
    v-model="currentShow"
    round
    position="bottom"
    :style="{ height: '70%' }"
  )
    .header 用户选单
    .main
      //-
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentShow: {
      get () {
        return this.isShow
      },
      set (newValue) {
        this.$emit('update:isShow', newValue)
      }
    }
  }
}

上面这种写法,采用 computed 来实现,完全代替了 watch 的方案。若是用 watch 需要像下面这样:

// 父组件中
<Child :isShow='isShow'/>

// 子组件中
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentShow: false
    }
  },
  watch: {
    isShow (newVal) {
      if (newVal) {
        this.currentShow = true
      } else {
        this.currentShow = false
      }
    }
  }
}

但是在开发的过程中,要尽量少的使用 watch,所以最佳实现方案是 “.sync 修饰符 + $emit(update:xxx) 的组合语法”。

【注意】
若是直接使用 props 里的属性,回报错:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated:XXX

如果只使用$emit(update:xxx) 而没有在父组件调用子组件的地方使用.sync 修饰符时,应该也会报错


【参考文档】
vue 的 .sync 修饰符

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值