[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “data”

found in

—> at src/views/training/classroom/components/newView.vue
at packages/drawer/src/main.vue
at src/components/Drawers/index.vue
at src/views/training/classroom/index.vue
at src/page/index/layout.vue
at src/page/index/index.vue
at src/App.vue

这是Vue的一个警告，意思是应避免直接修改一个props的值，因为这会导致在父组件重新渲染时被覆盖。建议使用一个基于props值的data或computed属性来代替直接修改props值。在此警告中，props的名字是"data"，它在文件路径为"src/views/training/classroom/components/newView.vue"的组件中被修改了。如果你需要修改这个值，你应该在子组件中定义一个与该props值相关的data属性，并在需要时更新该属性，而不是直接修改该props值。

一种常见的解决方案是在子组件中定义一个本地的data属性，将props的值复制到本地data属性中，并在需要修改时修改本地data属性，而不是修改原始的props值。然后，你可以通过$emit将已更改的本地data属性发送到父组件，并在父组件中获取新值并重新传递给子组件。具体实现如下：

子组件中的代码：

<template>
  <div>
    <form>
      <input v-model="localData" />
      <button @click.prevent="saveData">Save</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      localData: this.data
    }
  },
  methods: {
    saveData() {
      // 在需要修改时修改本地data属性
      this.localData = 'new value';
      // 发送已更改的本地data属性到父组件
      this.$emit('dataChanged', this.localData);
    }
  }
}
</script>

父组件中的代码：

<template>
  <div>
    <NewView :data="parentData" @dataChanged="handleDataChanged" />
  </div>
</template>

<script>
import NewView from './NewView.vue';

export default {
  components: {
    NewView
  },
  data() {
    return {
      parentData: 'initial value'
    }
  },
  methods: {
    handleDataChanged(value) {
      // 获取新的值并传递给子组件
      this.parentData = value;
    }
  }
}
</script>

这样就可以在子组件中修改本地data属性，然后将修改后的值发送到父组件，在父组件中更新prop，从而重新渲染子组件并展示新的数据。请注意，此示例仅用于演示目的，实际情况可能需要根据你的特定需求进行更改。