最直接方式是子组件用$emit触发自定义事件，父组件用@事件名监听；需显式声明事件、统一短横线命名、确保名称完全一致，避免拼写错误和异步时机错乱。
子组件向父组件传值，最直接的方式就是用 $emit 触发自定义事件，父组件通过 @事件名 监听并响应。这不是魔法，而是 Vue 明确约定的通信路径：子组件“喊话”，父组件“接话”。
子组件怎么正确 emit
必须先声明再触发，尤其在 setup 中需调用 defineEmits 显式定义事件列表，否则 TypeScript 报错、IDE 无提示、运行时也难排查。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 事件名统一用短横线格式（如
submit-form），避免驼峰（submitForm）——HTML 模板中属性不区分大小写，驼峰会失效 - 触发时直接调用：
emit('submit-form', formData)，支持传多个参数，父组件监听函数会按顺序接收 - 常见时机：按钮点击后、表单验证通过后、异步请求返回后（注意别在请求前就
emit，否则传的是空值或undefined）
父组件怎么可靠监听
监听名必须和 emit 的事件名完全一致（包括短横线、大小写），否则静默失败——控制台不报错，但逻辑不执行，这是调试中最容易卡住的点。
- 模板中写法：
<child-component></child-component> - 可绑定普通方法、内联赋值（
@close-dialog="show = false"）、或解构接收（@item-click="({ id, type }) => selectedId = id"） - 如果用
v-model，本质仍是$emit：Vue 3 是update:modelValue，Vue 2 是input；自定义 v-model 名（如v-model:title）对应update:title事件
容易忽略的关键细节
这些不是边缘情况，而是日常开发里高频踩坑点：
- 拼写不一致：子组件
emit('user-update')，父组件写成@userUpdate→ 不触发 - 异步时机错乱：比如在
await api.submit()前就emit→ 传的是初始值 - 没声明就使用：
setup中未调用defineEmits→ TypeScript 类型报错，且无法获得 IDE 补全 - 监听函数未定义或名写错：父组件
methods里漏了handleSave，或拼成handelSave→ 控制台报TypeError
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
