自定义组件 props 用在 v-model 上的处理办法

1,387 阅读1分钟
  1. 子组件中的 v-model 需要用到父组件传入的 props 值时, 不能直接引用, 最合理的处理是利用计算属性加一层转换
  2. 此类引用如果涉及向父组件反向传值, 可以启用 computed 隐藏的 getter setter 函数, 避免使用繁琐的 watch 或新建监听事件去向外抛出更新事件
<!-- 父组件 -->
<myComponent :popkey.sync="popkey" />

<!-- 子组件 -->
<template>
    <van-popup class="er-pop" v-model="popstate" />
</template>

props: {
  popkey: {
    type: Boolean,
    default: false
  }
}

computed: {
    popstate: {
      set (newval) {
        this.$emit('update:popkey', newval)
      },
      get () {
        return this.popkey
      }
    }
}