Vue.js子组件通过$emit触发自定义事件实现子传父通信，父组件用@监听并接收参数，推荐kebab-case命名，支持多参数或对象传参，结合v-model可实现双向绑定，需注意事件名拼写、执行时机及避免循环更新。
Vue.js 中子组件通过 $emit 向父组件触发自定义事件，是实现“子传父”通信的核心方式。关键在于：子组件主动调用 emit，父组件用 v-on（或 @）监听并接收参数，整个过程不依赖响应式数据共享，而是基于事件驱动。
子组件如何正确 emit 事件与传参
子组件内部使用 this.$emit('事件名', 参数1, 参数2, ...) 触发事件。参数可以是任意类型（字符串、数字、对象、数组等），支持多个参数，但建议只传必要数据，避免深层嵌套对象导致父组件难以维护。
- 事件名推荐用 kebab-case（如
'update-user'），避免和原生事件冲突，也更符合 Vue 惯例 - 单个参数可直接传值；多个参数会按顺序传递给父组件的事件处理器，形参一一对应
- 在方法中调用 emit，通常配合按钮点击、输入框失焦、表单提交等用户交互时机
父组件如何监听并接收 emit 的参数
父组件在引用子组件时，用 @事件名="处理函数" 或 v-on:事件名="处理函数" 绑定监听器。该函数接收 emit 传递的所有参数，顺序一致。
- 如果只传一个参数，处理函数形参直接写
handleUpdate(value) - 若 emit 多个参数，如
this.$emit('submit-form', username, email, isValid)，则父组件需写handleSubmit(uname, mail, valid) - 也可用对象一次性传参（如
{ username, email }），简化父组件接收逻辑，提高可读性
结合 v-model 实现双向绑定（语法糖）
当子组件 emit 'update:xxx' 事件（如 'update:modelValue'），父组件可用 v-model:xxx="data" 自动绑定。Vue 3 默认使用 modelValue 和 update:modelValue，Vue 2 则需显式声明 model 选项。
立即学习“前端免费学习笔记（深入）”；
- 子组件内部修改 prop 时，不直接赋值，而是
this.$emit('update:modelValue', newValue) - 父组件写
<ChildComponent v-model="inputText" />，等价于<ChildComponent :model-value="inputText" @update:model-value="val => inputText = val" /> - 自定义 v-model 名称（如
v-model:status）时，子组件 emit 对应'update:status'
常见问题与避坑提示
emit 不生效？参数没收到？多半是拼写或时机问题。
- 检查事件名大小写和连字符：子组件
$emit('user-click')，父组件必须用@user-click，不能写成@userClick（除非用驼峰且父组件也驼峰） - 确保 emit 发生在组件已挂载后（比如不要在
created中立即 emit，除非父组件已准备好监听） - 避免在子组件
watch响应 props 变化时无条件 emit，可能造成循环更新（如父改子 → 子 emit → 父再改子） - Vue 3 Composition API 中，用
defineEmits显式声明 emit 事件，提升类型安全和 IDE 提示
