不能直接修改 props 中的对象属性，因为 Vue 的单向数据流禁止子组件直接变更父组件数据，即使对象是引用类型；正确做法是通过事件通知父组件更新，并用浅拷贝避免引用共享。
不能靠“绕过警告”来修改复杂对象类型的 props，真正要做的，是理解 Vue 单向数据流的设计意图，并用规范方式实现父子协同更新。
为什么直接改对象属性会触发警告？
即使 props 是对象（引用类型），Vue 依然禁止子组件直接修改它。虽然 JavaScript 中对象赋值是引用传递，改 props.user.name 确实能影响父组件数据，但 Vue 在开发模式下会检测这种操作并报出 Avoid mutating a prop directly... 警告——这不是 bug，而是保护机制：防止状态变更源头不可追溯、多个子组件意外干扰同一份数据。
正确做法：用事件通知父组件更新
子组件不改 props，而是基于原对象生成新对象（或深拷贝），再通过自定义事件把变更意图告诉父组件。
- Vue 2 中常用
$emit('update:user', newUser)，父组件用.sync或监听事件更新自身数据 - Vue 3 推荐使用
defineProps+defineEmits显式声明通信契约，例如：const emit = defineEmits(['update-user']) - 修改嵌套属性时，必须对嵌套对象也做浅拷贝（如
{ ...props.obj, info: { ...props.obj.info, city: '上海' } }），避免意外共享引用
不推荐的“取巧”方式
有人利用对象引用特性，在子组件里直接改 props.obj.field，确实不报错且父组件同步更新。但这属于破坏约定的隐式通信：
立即学习“前端免费学习笔记（深入）”；
- 代码可读性差，别人无法从模板或事件中看出数据流向
- 一旦父组件重新渲染（比如响应式依赖变化），props 会被重置，导致子组件修改丢失
- 难以调试：当多个子组件同时操作同一个对象时，谁改了哪部分很难追踪
简化双向绑定的实用技巧
如果只是想让一个对象字段像 v-model 那样响应式联动，可以结合 Vue 的语法糖：
- 父组件传入
:user="parentUser"并监听@update:user="val => parentUser = val" - 子组件内部用
computed做 getter/setter（仅适用于简单字段映射） - 更稳妥的做法仍是：子组件只负责触发事件，父组件统一管理状态源
