Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)

Vue - 解决子组件中修改props值报错

其实这就是Vue的单向数据流的概念

单向数据流

• 父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值
• 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告

这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。

那么怎么解决呢？很简单

修改 prop 的两种情形：

①：这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的data prop 并将这个本地 prop 当作其初始值：

props: ['goodsItem'],
data: function () {
  return {
    localGoods: this.goodsItem
  }
}

②：如果这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['goodsItem'],
computed: {
  normalizedSize: function () {
    return this.goodsItem.trim().toLowerCase()
  }
}

注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。