高内聚的 emits 逻辑要求事件仅表达“发生了什么”，命名用动词短语如 itemAdded，禁用 doSearch 等指令式名称；需用 defineEmits 显式声明类型契约；单操作只 emit 一次，合并批量变更；emit 中不执行副作用或异步等待。
高内聚的 emits 逻辑，核心是让事件只承载“意图”，不掺杂业务判断或副作用，且每个事件职责单一、可预测、可测试。
明确事件语义，只表达“发生了什么”
事件名应是动词短语，描述子组件内部发生的**确定行为**，而非父组件该做什么。比如用 submit 而非 handleSubmit，用 itemRemoved 而非 removeItem。
- ✅ 推荐：
itemAdded、filterChanged、tabSwitched - ❌ 避免：
doSearch、updateParentState、callApi
这样父组件才能自由决定响应方式（弹窗、跳转、发请求、仅更新本地状态），而不是被子组件“指挥”。
用 defineEmits 声明接口，强化类型与契约
在 <script setup> 中显式声明 emits，既是文档，也是约束。配合 TypeScript 可精准定义参数结构：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
const emit = defineEmits({
// 简单事件
'open': () => true,
// 带参数事件：接收一个对象，校验必填字段
'submit': (payload: { id: string; content: string }) => {
return typeof payload.id === 'string' && typeof payload.content === 'string'
},
// 可选参数事件
'error': (message?: string, code?: number) => true
})
这能防止误传参数，也让 IDE 自动补全、编译期报错成为可能。
事件只触发一次，避免隐式多次调用
一个用户操作（如点击按钮）应对应一个明确事件，不要在内部循环 emit 或条件嵌套 emit 多次。若需批量通知，合并为一个结构化事件：
- ✅ 合并：
emit('itemsUpdated', { added: [...], removed: [...] }) - ❌ 分散：
emit('itemAdded', item1)+emit('itemAdded', item2)+emit('itemRemoved', id)
父组件监听更简洁，测试断言也只需检查一次 emitted() 返回值。
避免在 emit 中执行副作用或等待异步结果
emits 是通信通道，不是执行入口。子组件不应在 emit 后主动等待父组件回调再继续流程（除非明确设计为带回调模式）。常见反模式：
- 在
emit('submit')后立即清空表单 —— 应由父组件确认成功后再通知子组件重置 - 在
emit('click')中调用 API 并 await 结果 —— 这已超出“通知”范畴，属于业务逻辑泄漏
真正需要反馈时，可采用带回调的约定（如传入 onSuccess: () => void 函数作为 props），但要清晰分离“通知”和“响应”两个阶段。
