vue3中子组件修改父组件传递的值

App.vue

<template>
  <div>
    {{ form }}
    <son v-model="form"></son>
  </div>
</template>
<script setup>
import son from './son.vue';
let form = ref({
  name: '123',
  age: '',
});
</script>

son.vue

<template>
  <div>
    <input type="text" v-model="form.name" />
  </div>
</template>
<script setup>
let props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
let form = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(target, key, value) {
        emit('update:modelValue', { ...target, [key]: value });
        return true;
      },
    });
  },
  set(val) {
    emit('update:modelValue', { ...props.modelValue, name: val });
  },
});
</script>

• 子组件接收一个 modelValue 的 prop，并通过 v-model 机制实现了对父组件数据的双向绑定。
• 在模板中，使用了 <input> 元素，其值绑定到了 form.name。
• 使用 <script setup> 语法，通过 let props = defineProps(['modelValue']); 定义了 props 对象，接收 modelValue 的值。
• 使用 const emit = defineEmits(['update:modelValue']); 定义了 emit 函数，用于触发 update:modelValue 事件。
• 使用 let form = computed({ ... }); 定义了 form 变量，通过 Proxy 对象包装 props.modelValue，以监听对其属性的修改，并在修改时通过 emit 触发 update:modelValue 事件，从而实现父子组件之间的双向绑定。