子组件不能直接修改父组件数据，须通过$emit触发事件由父组件更新；Vue禁止直接改props以防数据流混乱，推荐语义化事件名及v-model封装表单控件。

子组件不能直接修改父组件的数据，这是 Vue 的单向数据流原则。正确做法是子组件通过 $emit 触发自定义事件，由父组件监听并更新自身数据。

为什么不能直接改？

Vue 设计上禁止子组件直接修改父组件传入的 props，否则会触发警告（如 “Avoid mutating a prop directly”）。这能避免数据流向混乱、调试困难、状态不可预测等问题。

用 $emit 通知父组件更新

子组件调用 this.$emit('事件名', 数据) 向上抛出事件，父组件用 @事件名="处理函数" 接收并修改自己的响应式数据。

• 子组件中：触发事件时传参（可以是字符串、对象、布尔值等）
• 父组件中：在绑定事件的处理函数里，用 this.xxx = 新值 更新 data 或 ref
• 推荐给事件起语义化名字，比如 update:title、change:visible，避免用 set、update 等模糊动词

结合 v-model 的简化写法（Vue 2 / Vue 3 均适用）

当子组件封装表单控件（如输入框、开关）时，可让父组件用 v-model 绑定，内部自动映射为 value prop + input 事件（Vue 2）或 modelValue prop + update:modelValue 事件（Vue 3）。

• Vue 2 示例：子组件接收 props: ['value']，触发 this.$emit('input', newValue)
• Vue 3 示例：子组件接收 props: ['modelValue']，触发 this.$emit('update:modelValue', newValue) 或简写为 this.$emit('update:modelValue', newValue)
• 父组件写 即可双向同步

进阶：使用 .sync 修饰符（Vue 2）或 v-model 多参数（Vue 3）

如果需要同步多个 prop，Vue 2 可用 .sync（如 :title.sync="title"），子组件触发 this.$emit('update:title', newTitle)；Vue 3 则支持多个 v-model，例如 v-model:title="title" v-model:loading="isLoading"，对应触发 update:title 和 update:loading 事件。

不复杂但容易忽略