vue3 子组件怎么修改父组件的值

在 Vue3 中，子组件无法直接修改父组件的值。这是为了保持单向数据流的原则，使得代码更加可预测和可维护。但是，你可以通过使用自定义事件来实现子组件向父组件传递数据，然后由父组件来修改对应的值。

首先，在父组件中，你需要定义一个方法来接收子组件传递的数据，并在该方法中修改父组件的值。例如：

<template>
  <div>
    <p>父组件的值: {{ parentValue }}</p>
    <ChildComponent @update-parent-value="updateParentValue" />
  </div>
</template>

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

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

然后，在子组件中，你可以通过 `$emit` 方法触发父组件定义的事件，并传递需要修改的值。例如：

<template>
  <button @click="updateParent">修改父组件的值</button>
</template>

<script>
  export default {
    methods: {
      updateParent() {
        this.$emit('update-parent-value', '新的值');
      }
    }
  };
</script>

这样，当子组件中的按钮被点击时，会触发父组件中的 `updateParentValue` 方法，并将新的值作为参数传递进去，从而实现了子组件修改父组件的值。