vue3 子组件修改父组件的值

在 Vue3 中，子组件修改父组件的值需要使用 `emit` 方法。具体步骤如下：

1. 在父组件中定义一个方法，用于接收子组件传递的值并修改父组件的数据。

   <template>
     <div>
       <child-component @update-value="updateValue"></child-component>
       <p>父组件的值：{{ value }}</p>
     </div>
   </template>

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

   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         value: '',
       };
     },
     methods: {
       updateValue(newValue) {
         this.value = newValue;
       },
     },
   };
   </script>

2. 在子组件中使用 `emit` 方法触发父组件的方法，并传递需要修改的值。

   <template>
     <div>
       <input type="text" v-model="inputValue" />
       <button @click="updateValue">修改父组件的值</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         inputValue: '',
       };
     },
     methods: {
       updateValue() {
         this.$emit('update-value', this.inputValue);
       },
     },
   };
   </script>

在上面的代码中，子组件中的 `updateValue` 方法通过 `$emit` 方法触发了父组件中的 `updateValue` 方法，并将 `inputValue` 作为参数传递给了父组件。