vue3子组件如何修改父组件的值

在Vue 3中，子组件可以通过事件（Event）的方式来修改父组件的值。具体步骤如下：

1. 在父组件中定义一个属性，并将其作为prop传递给子组件。例如，在父组件中定义一个名为"message"的属性：

   <template>
     <div>
       <h2>{{ message }}</h2>
       <ChildComponent :parentMessage="message" @update-message="updateMessage" />
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     data() {
       return {
         message: 'Hello Vue!'
       };
     },
     components: {
       ChildComponent
     },
     methods: {
       updateMessage(newMessage) {
         this.message = newMessage;
       }
     }
   }
   </script>

2. 在子组件中，通过$emit方法触发一个自定义事件，并将要传递给父组件的新值作为参数。例如，在子组件中触发名为"update-message"的事件：

   <template>
     <div>
       <input v-model="childMessage" />
       <button @click="updateParentMessage">Update Parent</button>
     </div>
   </template>
   
   <script>
   export default {
     props: ['parentMessage'],
     data() {
       return {
         childMessage: this.parentMessage
       };
     },
     methods: {
       updateParentMessage() {
         this.$emit('update-message', this.childMessage);
       }
     }
   }
   </script>

在上述例子中，子组件中的输入框绑定了一个名为"childMessage"的数据，并且点击按钮时会触发updateParentMessage方法。该方法通过$emit方法触发了一个名为"update-message"的自定义事件，并将"childMessage"作为参数传递给父组件。

这样，当子组件中的输入框内容修改后，点击按钮即可将新的值传递给父组件，父组件中的"message"属性会被更新。