解决 [Vue warn]:Avoid mutating a prop directly 警告

解释：

Vue 警告 [Vue warn]: Avoid mutating a prop directly 表示你尝试直接改变一个父组件传递给子组件的 prop 属性的值。在 Vue 中，props 是单向数据流，子组件不应该直接修改传入的 prop，因为这会导致数据流向混乱，并且不易跟踪问题。

解决方法：

1. 使用 data 或 computed 属性来传递 prop 的值，然后操作这些数据。
2. 如果需要修改 prop 的值，可以通过事件向父组件发送一个信号，由父组件来修改对应的 prop 值。

示例代码：

// 子组件
export default {
  props: ['myProp'],
  data() {
    return {
      localValue: this.myProp // 使用 data 属性来保存 prop 的值
    }
  },
  methods: {
    modifyValue() {
      // 不直接修改 prop，而是修改本地数据
      this.localValue = 'new value';
      // 通过事件发送给父组件，由父组件修改 prop 值
      this.$emit('update:myProp', this.localValue);
    }
  }
}
 
// 父组件
<template>
  <child-component :my-prop="parentValue" @update:my-prop="updateParentValue"></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentValue: 'initial value'
    }
  },
  methods: {
    updateParentValue(newValue) {
      // 当子组件发送 update:myProp 事件时，更新父组件的值
      this.parentValue = newValue;
    }
  }
}
</script>

在这个例子中，子组件不直接修改 myProp，而是修改了一个名为 localValue 的本地数据。当需要改变数据时，子组件发出一个自定义事件 update:myProp，并将新值传递给父组件，父组件在接收到事件后更新它的 parentValue。这样保持了数据的单向流动，也避免了直接修改 prop 的做法。