vue3子组件改变父组件中的值

在 Vue 3 中，子组件改变父组件中的值，可以通过使用自定义事件和 `emit` 方法来实现。

首先，在父组件中定义一个数据属性，例如 `parentValue`，然后将它传递给子组件：

<template>
  <div>
    <p>Parent Value: {{ parentValue }}</p>
    <ChildComponent :childValue="parentValue" @update-parent-value="updateParentValue" />
  </div>
</template>

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

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

然后，在子组件中，接收父组件传递的 `childValue` 属性，并在需要的时候使用 `emit` 方法触发自定义事件 `update-parent-value` 来通知父组件更新值：

<template>
  <div>
    <input type="text" v-model="childValue" />
    <button @click="updateParent">Update Parent Value</button>
  </div>
</template>

<script>
export default {
  props: ['childValue'],
  methods: {
    updateParent() {
      this.$emit('update-parent-value', this.childValue);
    }
  }
}
</script>

这样，当子组件中的输入框内容发生改