Vue 3 中 defineEmits 显式声明事件，提升类型安全与 IDE 提示；支持字符串数组、对象校验及 TS 泛型写法；替代 Options API 的 emits 选项，统一事件契约；需顶层静态调用，未声明事件会丢失类型检查。
Vue 3 中通过 defineEmits 可以显式声明组件触发的事件，让类型推导更准确、IDE 提示更友好，同时避免手写 emits 选项带来的冗余和遗漏。
明确声明事件名，提升类型安全
在组合式 API 中，defineEmits 返回一个函数，用于触发事件。配合 TypeScript，能自动推导参数类型：
- 不带参数的事件：直接写字符串数组，如
const emit = defineEmits(['update', 'close']) - 带参数的事件：用对象形式声明，键为事件名，值为校验函数或参数类型数组，例如：
const emit = defineEmits({'submit': (data: FormData) => true,'error': (msg: string, code: number) => true}) - TS 5.0+ 支持更简洁的泛型写法：
const emit = defineEmits<{ (e: 'change', value: string): void; (e: 'focus'): void }>()
替代 Options API 的 emits 选项，减少重复
以前在 Options API 中需在 emits 选项里列一遍，在 methods 或逻辑里再手动 this.$emit；现在统一收口到 defineEmits 声明 + emit() 调用，语义更集中：
- 声明即契约：其他开发者一眼看出该组件对外暴露哪些事件
- 删除
emits: ['xxx']选项，不再需要两处维护 - 搭配
defineProps，props 和 emits 形成完整输入/输出接口
与 setup 语法糖（script setup）天然契合
在 <script setup> 中，defineEmits 是顶层宏，无需 return，也不用考虑 this 上下文：
立即学习“前端免费学习笔记（深入）”；
- 直接调用
const emit = defineEmits(...)，然后在任意位置emit('click', payload) - 支持解构（但注意：解构后失去响应式绑定能力，推荐直接用
emit） - 可与
defineExpose配合，形成“子组件可控输出”的完整链路
常见误区与建议
实际使用中容易忽略几个细节：
-
不能在条件分支或循环中调用
defineEmits——它必须是顶层静态调用 - 未声明的事件仍可触发（Vue 不报错），但会丢失类型检查和文档提示，建议严格声明
- 如果父组件监听了未声明的事件（比如拼写错误），Vue 控制台会给出警告，利于早期发现
- 动态事件名（如
emit(eventType, ...)）无法被类型系统捕获，此时建议用联合类型兜底或改用事件总线
