子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)

props数据规则：

    props: {
        // prop 是父组件传过来的数据，受父组件数据影响的
 
        //   如果是普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不回传导给父组件
 
        //   如果是引用类型（数组，对象）
        //      可以修改，例如：[].push() 对象.xxx = xxx
        //      不能重新赋值， xxx = []
    },

单向数据流：

父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。
这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致所应用的数据流向杂乱。

处理方法：

1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。

props: ['goodsItem'],
data: function () {
  return {
    localGoods: this.goodsItem //使用拷贝将数据直接接收
  }
}

props: ['goodsItem'],
computed: { //使用计算属性将数据转换后接收
  normalizedSize: function () {
    return this.goodsItem.trim().toLowerCase()
  }
}

2.需要同步修改父组件数据时可以使用sync修饰符；利用组件自定义事件，通过this.$emit(方法名,参数)将数据传回。

//父组件
<WriteOffDialog :visible.sync="writeOffShow" ></WriteOffDialog>

//子组件
cancel() { //传回具体值
      this.$emit('update:visible', false)
      //this.$emit('update:isShow', false)
      // 或者如下也可以
      //this.$emit('update:is-show', false)
      },

// 父组件
<todo-list :list.sync="list" /> 
 
// 子组件
methodName(index) {
    this.$emit('update:list', this.newList) //传回数据
}

总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。）；部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。