vue3子组件修改父组件props

在 Vue 3 中，子组件是不允许直接修改父组件的 props 的。这是因为 Vue 的设计理念是单向数据流，父组件通过 props 将数据传递给子组件，子组件可以读取这些数据但不能直接修改它们。

如果你需要在子组件中修改父组件的数据，你可以通过在子组件中触发一个自定义事件，然后在父组件中监听该事件并相应地更新数据。

下面是一个示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="message" @update-message="updateMessage" />
    <p>Message from child component: {{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="changeMessage">Change Message</button>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    changeMessage() {
      const newMessage = 'Hello from child';
      this.$emit('update-message', newMessage);
    }
  }
};
</script>

在上面的示例中，父组件 `ParentComponent` 传递了 `message` 给子组件 `ChildComponent` 的 props。子组件中的按钮点击事件触发了 `changeMessage` 方法，在该方法中通过 `$emit` 方法触发了一个名为 `update-message` 的自定义事件，并将新的消息作为参数传递给父组件。在父组件中监听了 `update-message` 事件，当事件触发时，调用 `updateMessage` 方法来更新父组件的 `message` 数据。

这样，当子组件中的按钮被点击时，父组件的 `message` 数据会被更新，从而实现了子组件修改父组件数据的效果。