以下是针对 父组件传递对象 + 子组件修改对象属性 的完整示例代码，同时遵守 Vue3 的单向数据流原则：
1. 父组件代码 (ParentComponent.vue)
vue
<template>
<!-- 通过 v-model 传递整个对象 -->
<ChildComponent v-model="formData" />
<!-- 显示数据变化 -->
<div>父组件数据：{{ formData }}</div>
</template>
<script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 父组件数据（包含多个属性）
const formData = reactive({
name: '张三',
age: 25,
address: {
city: '北京',
street: '朝阳区'
},
email: 'zhangsan@example.com'
});
</script>2. 子组件代码 (ChildComponent.vue)
vue
<template>
<div>
<!-- 绑定对象属性 -->
<el-input v-model="localForm.name" placeholder="姓名" />
<el-input v-model="localForm.age" placeholder="年龄" type="number" />
<el-input v-model="localForm.address.city" placeholder="城市" />
<el-input v-model="localForm.email" placeholder="邮箱" />
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
// 核心：通过计算属性实现双向绑定
const localForm = computed({
get: () => props.modelValue,
set: (newValue) => {
// 触发更新事件，通知父组件
emit('update:modelValue', newValue);
}
});
</script>3. 方案解析
为什么能直接修改对象属性？
-
响应式原理 ：父组件通过
reactive()创建响应式对象，子组件通过computed的set方法触发更新。 -
数据流安全 ：虽然看似直接修改了对象属性，但实际上是通过
emit让父组件更新自己的数据，符合单向数据流。
注意事项
-
不要直接赋值整个对象：
js
// ❌ 错误！这会导致失去响应性 localForm.value = { ...localForm.value, name: '李四' }; // ✅ 正确！Vue 会追踪对象内部属性的变化 localForm.value.name = '李四'; -
嵌套对象更新 ：如果修改深层属性（如
address.city），需确保父组件对象是reactive创建的。
4. 扩展：使用 defineModel (Vue 3.4+)
如果使用 Vue 3.4+ 的 defineModel，可以进一步简化代码：
vue
<script setup>
// 子组件 (ChildComponent.vue)
const model = defineModel(); // 自动处理 v-model 绑定
// 直接修改属性即可（底层自动触发 emit）
const handleChange = () => {
model.value.name = '李四';
};
</script>5. 最终效果
-
父组件数据会随着子组件的修改自动更新。
-
所有修改都通过 Vue 的响应式系统追踪，无直接操作 props 的风险。
常见问题解决
Q：为什么修改子组件后父组件数据没变？
-
确保父组件数据用
reactive或ref创建。 -
不要解构父组件对象（如
const { name } = formData会失去响应性）。
Q：如何修改嵌套对象属性？
直接修改即可（得益于 Vue 的响应式系统）：
js
// 子组件中
localForm.value.address.city = '上海'; // 自动触发更新通过这个方案，你可以在保持代码简洁的同时，安全地实现 父子组件间复杂对象的双向绑定。