vue子组件修改props报错： [Vue warn]: ’Avoid mutating a prop directly since the value will be …‘解决方法

报错解释：

Vue 报错提示，“Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders”。这意味着你正尝试直接修改一个 prop 的值，这是不被推荐的，因为 prop 是从父组件传递过来的，如果父组件的数据更新了，这个值将被重写。Vue 设计上不鼓励直接修改 prop，因为这违反了单向数据流的原则。

解决方法：

1. 使用 data 或 computed 属性转换 prop 的值，然后操作这个转换后的数据。
2. 使用事件通知父组件修改相应的 prop 值。
3. 如果你确实需要修改 prop，可以在子组件内部使用一个本地变量，并在 created 或 mounted 钩子中将 prop 的值赋给这个本地变量。然后你可以操作这个本地变量，而不直接修改 prop。

示例代码：

// 子组件
export default {
  props: ['initialValue'],
  data() {
    return {
      localValue: this.initialValue // 将prop的值复制到本地数据
    };
  },
  created() {
    // 现在可以操作localValue，而不是直接操作initialValue
  },
  methods: {
    updateValue() {
      // 触发某些逻辑后更新本地值
      this.localValue = 'new value';
      // 然后可以发射一个事件通知父组件
      this.$emit('update:initialValue', this.localValue);
    }
  }
};
 
// 父组件
<template>
  <child-component
    :initial-value="parentValue"
    @update:initial-value="value => parentValue = value"
  />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'initial value'
    };
  }
};
</script>

在这个示例中，子组件接收一个 initialValue prop，并在 data 中创建了一个 localValue。当需要修改值时，子组件更新 localValue，并通过一个自定义事件 update:initialValue 通知父组件。父组件监听这个事件，并相应地更新它的数据。这样，无论父组件的数据如何变化，子组件的本地状态都将独立维护。