Vue 的 props 是只读的，直接修改会触发警告，根本原因在于 Vue 要守住“单向数据流”边界——父组件是唯一可信数据源，子组件只能读不能写。
Vue 的 props 是只读的，直接修改会触发警告，根本原因在于 Vue 要守住“单向数据流”这条边界——父组件是唯一可信的数据源，子组件只能读、不能写。这不是限制，而是防止状态失控的设计保护。
为什么改 props 会报错（或发警告）？
Vue 在开发模式下会对 props 做响应式拦截。当你执行 this.msg = 'new'（msg 是 string/number/boolean 等基本类型），Vue 检测到你试图覆盖 prop 的响应式引用，立刻抛出 Avoid mutating a prop directly 警告。
注意：如果传的是对象或数组，this.obj.name = 'xxx' 不会报错，因为没改变 obj 的内存地址；但这仍是不推荐的隐性修改——它绕过了数据流规范，父组件无法感知、无法拦截、无法回滚，多个子组件同时操作时极易引发冲突。
正确做法一：用本地 data 副本做中间态
适用于子组件内部需要编辑、暂存、校验，但无需实时同步回父组件的场景（比如表单草稿、弹窗开关状态）。
立即学习“前端免费学习笔记（深入）”；
- 在 data() 中声明一个本地变量，初始值取自 props
- 所有读写操作都针对这个本地变量，与 props 完全解耦
- 若需提交，再通过 $emit 显式通知父组件
示例：
<!-- 子组件 -->
data() { return { localName: this.name } },
<input v-model="localName">
正确做法二：用 $emit + update:xxx 实现双向通信
适用于需要实时响应、父组件必须参与更新逻辑的场景（如开关控制、搜索关键词、分页页码）。
- 子组件不改 props，而是调用 this.$emit('update:name', newValue)
- 父组件用 @update:name="name = $event" 或简写 v-model:name="name" 接收并更新自身数据
- 更新后，新值会重新通过 props 下发，子组件自动响应
这是 Vue 官方推荐的“受控组件”模式，清晰、可追踪、支持调试工具观测。
额外提醒：别踩这些常见坑
- 不要在 watch 或 mounted 里直接赋值 this.prop = xxx —— 即使没报错，也违背设计意图
- 避免用 .sync 修饰符（Vue 2）或滥用 v-model（Vue 3）掩盖事件逻辑，应显式写出 update 事件语义
- 复杂表单或多级嵌套时，优先考虑用 Pinia 管理共享状态，而非层层透传 props
