vue子传父通信标准方式是子组件用this.$emit()触发事件，父组件用@事件名监听响应；事件名推荐短横线格式，参数可单个、多个或对象；v-model是其语法糖，适用于表单控件。
子组件通过 this.$emit() 主动“喊话”，父组件用 @事件名 “听见并响应”——这是 Vue 实现子传父通信最标准、最可控的方式。
子组件：明确时机，规范触发
在子组件中，需要在合适的行为节点（比如按钮点击、输入完成、接口返回后）调用 this.$emit()：
- 事件名推荐用短横线格式（如
'update-user'），避免和原生事件冲突，也符合 HTML 规范 - 参数可传一个值，也可多个（
this.$emit('submit', name, email, isValid)），或封装成对象（this.$emit('submit', { name, email })），后者更清晰易维护 - 不要直接修改 props，而是通过 emit 告知父组件“我需要你更新什么”
- 常见写法示例：
methods: { onSave() { this.$emit('save', this.formData); } }
父组件：监听绑定，接收处理
父组件在使用子组件时，用 @事件名="处理函数" 建立连接，函数接收 emit 传来的参数：
- 若子组件传单个对象：
@save="handleSave"，则handleSave(data) { console.log(data.name) } - 若传多个参数：
this.$emit('submit', 'Alice', 25)，父组件需对应两个形参：handleSubmit(name, age) - 支持解构简写：
@submit="({ name, age }) => userName = name"（适合简单赋值） - 确保事件名大小写、拼写与子组件完全一致，Vue 不自动转换
v-model 是 emit 的语法糖，适合表单类场景
当子组件封装输入框、开关等控件时，可借助 v-model 简化双向绑定逻辑：
- 子组件内部修改值时，不改 prop，而是：
this.$emit('update:modelValue', newValue) - 父组件写：
<myinput v-model="inputText"></myinput>，等价于：inputText = val" /> - Vue 3 默认使用
modelValue和update:modelValue；Vue 2 需在子组件中声明model: { prop: 'value', event: 'input' }并 emit'input'
关键注意事项
实际开发中容易踩坑的几个点：
-
执行时机要合理：不要在
mounted或计算属性里盲目 emit，应在用户交互或异步操作完成后触发 - 避免循环更新：父组件在响应 emit 后修改了某个值，而该值又作为 prop 传给子组件，子组件若未做防抖或条件判断，可能再次 emit，形成死循环
- 事件命名一致性：子组件 emit 的字符串必须和父组件 @ 后的字符串一模一样，包括大小写和连字符
- 参数精简：只传必要字段，别把整个 $data 或深层嵌套对象全发过去，增加父组件解析负担
