VUE3子组件修改父组件传来的值

在Vue 3中，子组件修改父组件传来的值通常需要通过自定义事件来实现。下面是一个示例：

在父组件中，定义一个数据属性，并将其传递给子组件：

<template>
  <div>
    <p>父组件值：{{ parentValue }}</p>
    <ChildComponent :childValue="parentValue" @updateParentValue="updateParentValue"></ChildComponent>
  </div>
</template>

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

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

在子组件中，通过`$emit`方法触发自定义事件，并将新的值传递给父组件：

<template>
  <div>
    <p>子组件值：{{ childValue }}</p>
    <button @click="changeChildValue">修改父组件值</button>
  </div>
</template>

<script>
export default {
  props: ['childValue'],
  methods: {
    changeChildValue() {
      const newValue = '新的值';
      this.$emit('updateParentValue', newValue);
    }
  }
};
</script>

通过这种方式，子组件可以间接地修改父组件传递过来的值。当点击子组件中的按钮时，会触发`changeChildValue`方法，该方法通过`$emit`方法触发自定义事件`updateParentValue`，并传递新的值给父组件。父组件接收到新值后，会调用`updateParentValue`方法来更新`parentValue`。这样就实现了子组件修改父组件传来的值的效果。