Vue将props值实时传递 并可修改

Posted 2021-03-02 mankii

我们都知道props值是只读的，子组件内不可直接修改，会报错滴

但是很多时候这个值是需要子组件主动修改的，一般我们会使用this.$emit()去修改，但比较麻烦

下面这种方式可以实现：

1、父组件实时修改props值时，子组件可以接收到改变

2、子组件可主动修改该值

<div>{{RealValue}}</div>

  props: [ "value" ],
  watch: {
    value (v) {
      this.RealValue = v
    }
  },
  data () {
    return {
      RealValue: this.value
    }
  }

原理很简单，就是使用一个RealValue作为实际显示的参数，并且使用watch实时把value值传给他

PS：这里的值是字符串格式，如果value是对象或者数组，watch处要写成：

  watch: {
    value:{
       deep: true,
       handler(v) {
          this.RealValue = v
       }
    }
  },