Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

错误：[Vue warn]: 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: "grants" (found in component )

出错原因：

父组件：

子组件：

使用了element UI的transfer穿梭框组件，绑定了已授权的角色id，从父组件传导子组件的prop中

此时如果操作赋权，将会改变绑定的grants属性，引起以上报错信息。子组件中更改绑定的prop值最好使用计算属性computed解决。

解决方式:

computed: {
      grants_: {
        get() {
          return this.grants;
        },
        set(val) {
          //grants_改变由父组件控制
          this.$emit("on-change-grant", val);
        }
      }
    }

将绑定的grants改为绑定计算属性值grants_，此时的set方法不能写 this.grants = val,这样和直接绑定prop中的grants有什么两样呢？所以，最好要将此时的grants_改变交给父组件控制，通过父组件来改变prop的grants值。完美解决这个错误。

父组件中修改：

methods里面添加：

 

表达能力有限，第一次遇到这个问题所以将它写在博客中，将错误原因和解决方式截图显示出来方便大家理解，有什么不对的地方大家可以评论我一起学习。