vue解决子组件中报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)

其实这就是Vue的单向数据流的概念，因为识别到子组件中修改了props值。

单向数据流

父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。
但是反过来则不行。不应该在子组件内部修改定义好的props。
这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。

解决如题报错的方式有两种情形：

①props 用来传递一个初始值，子组件接下来希望将其作为一个本地的变量来使用。在子组件内的data中定义一个变量，并将接收的props当作其初始值：

props: ['count'],
data() {
  return {
    localCount: this.count
  }
}

②如果依赖该props进行计算/转换，可以定义一个计算属性

props: ['count'],
computed: {
  calc() {
    return 'count-' + this.count
  }
}

注意：

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

参考：https://blog.csdn.net/weixin_46242909/article/details/114012729