vue3中子组件中如何修改父组件传过来的数据

在 Vue 3 中，子组件是不能直接修改从父组件传递来的 props 的。这是因为 props 是单向数据流，只能从父组件传递到子组件，而不能反过来。如果子组件需要修改从父组件传递来的数据，应该通过向父组件发送事件来请求修改。

具体来说，可以在子组件中使用 `$emit` 方法来触发一个自定义事件，并传递需要修改的数据。父组件可以监听这个自定义事件，并在事件处理函数中修改相应的数据。这样，就可以实现子组件间接修改父组件数据的效果。

以一个简单的示例来说明：

<!-- 父组件 -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <child-component :count="count" @update-count="updateCount" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    updateCount(newCount) {
      this.count = newCount;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="incrementCount">{{ count }}</button>
</template>

<script>
export default {
  props: {
    count: Number,
  },
  methods: {
    incrementCount() {
      const newCount = this.count + 1;
      this.$emit('update-count', newCount);
    },
  },
};
</script>

在这个示例中，子组件 `ChildComponent` 接收一个名为 `count` 的 prop，用于显示当前计数器的值。当用户点击按钮时，子组件会通过 `$emit` 方法触发一个名为 `update-count` 的自定义事件，并传递一个新的计数器值 `newCount`。父组件监听这个自定义事件，并在事件处理函数中将计数器的值更新为 `newCount`。

通过这种方式，子组件就可以间接修改父组件的数据。