vue3子组件修改父组件值

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

1. 在父组件中定义一个方法，用于接收子组件传递过来的值，并将其赋值给父组件的数据。

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

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

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

2. 在子组件中定义一个方法，用于触发 `change-value` 事件，并将需要传递给父组件的值作为参数传递给该事件。

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

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

这样，当子组件中的按钮被点击时，就会触发 `change-value` 事件，并将输入框中的值作为参数传递给父组件的 `handleChangeValue` 方法，从而实现了子组件修改父组件的值。