vue中子组件向父组件传值核心是$emit触发自定义事件、父组件用@监听；需短横线命名、setup中用defineemits声明，支持多参数传递与v-model语法糖，注意事件名匹配和执行时机。
Vue 中子组件向父组件传值，核心就是 $emit 配合 @（即 v-on）监听。这不是“黑魔法”，而是 Vue 响应式通信的约定机制——子组件主动触发事件，父组件决定如何响应。
子组件怎么发：命名、声明与触发
事件名推荐用短横线格式（如 update-user），避免驼峰（如 updateUser）在 HTML 模板中失效（因为标签属性不区分大小写）。在 setup 脚本中，必须用 defineEmits 显式声明可触发的事件，否则 TypeScript 会报错，IDE 也难提示。
defineEmits(['submit-form', 'close-dialog', 'item-click'])- 触发时直接调用：
emit('submit-form', formData)或emit('item-click', { action: 'bold', isActive: true }) - 支持多参数传递，所有额外参数都会原样传给父组件的监听函数
父组件怎么收：监听、绑定与响应
父组件在使用子组件标签时，用 @事件名="处理函数" 监听。注意事件名要和子组件 emit 的完全一致（包括大小写和短横线），否则静默失败，控制台不报错但逻辑不执行。
-
<form-input></form-input>→ 调用 methods 或 setup 中定义的函数 -
<modal false></modal>→ 内联赋值，适合简单状态切换 -
<counter> count += val"></counter>→ 内联箭头函数，注意this指向问题
v-model 是怎么靠 $emit 工作的
v-model 在组件上本质是语法糖：v-model="value" 等价于 :value="value" @input="value = $event"。所以只要子组件在合适时机 emit('input', newValue)，父组件就能自动同步。
- Vue 3 支持多个
v-model绑定，如v-model:title，对应需触发update:title事件 - 底层仍是
$emit驱动，没有额外魔法，只是约定封装
容易踩坑的关键细节
这些点看似小，但调试时最耗时间：
- 事件名拼错或大小写不一致 → 父组件监听不到（静默失败）
- 子组件在异步操作完成前就
emit→ 传的是初始值或undefined - 父组件监听函数未定义或方法名拼错 → 控制台报
TypeError: _ctx.xxx is not a function - 在
setup中没调用defineEmits→ TypeScript 报错，IDE 无补全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
