vue3子组件修改父组件传入的值

在Vue 3中，父组件通过props向子组件传递数据，而子组件可以直接修改并使用这些数据，因为Vue会自动监听prop的变化，并更新视图。然而，子组件不能直接改变prop的原始值，而是应该通过事件bus或者自定义的setter方法来通知父组件。

以下是一个简单的示例，假设父组件有个名为`data`的prop：

<!-- 父组件 -->
<template>
  <div>
    <child :data="parentData"></child>
  </div>
</template>

<script>
export default {
  data() {
    return { parentData: { value: '初始值' } };
  }
};
</script>

子组件中，你可以这样修改并触发更新：

// 子组件 Child.vue
<template>
  <button @click="updateParentData">更新父组件数据</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(props) {
    const myValue = ref(props.data.value); // 创建一个局部引用

    function updateParentData() {
      myValue.value = '新的值'; // 修改myValue而不是props.data.value
      // 触发父组件更新，这里可以使用$emit('update:parentData', myValue.value)
      this.$emit('update:parentData', myValue.value);
    }

    return { updateParentData };
  }
};
</script>

然后在父组件里监听这个更新事件：

<template>
  ...
  <child @update:parentData="handleUpdate"></child>
</template>

<script>
...
methods: {
  handleUpdate(value) {
    console.log('父组件接收到更新:', value);
    this.parentData.value = value; // 更新父组件的数据
  }
}
</script>