vue 3 中自定义事件类型声明需用 defineemits 配合泛型，精准约束事件名与载荷结构；支持函数签名联合类型或元组形式接口，避免 any、运行时字符串写法及粒度合并，并可与 props 类型联动确保类型安全。
Vue 3 中为自定义事件对象写严谨的类型声明，核心是用 defineEmits 配合泛型参数明确事件名与载荷结构，而不是依赖运行时字符串拼写或 any 类型。
用泛型接口精准约束每个事件
在 <script setup lang="ts"></script> 中，直接传入一个函数签名组成的联合类型：
-
update:modelValue事件必须携带string | number类型值 -
change事件接收一个包含id和status的对象 -
close是无参事件，只触发不传数据
写法如下：
<script setup lang="ts"><br>const emit = defineEmits<{<br> (e: 'update:modelValue', value: string | number): void<br> (e: 'change', payload: { id: number; status: 'active' | 'inactive' }): void<br> (e: 'close'): void<br>} >()<br></script>抽离接口提升可维护性
当事件多或载荷复杂时，把类型定义单独提取为接口更清晰：
interface Emits {
'update:modelValue': [value: string | number]
'change': [{ id: number; status: 'pending' | 'done' }]
'error': [error: Error]
}
const emit = defineEmits
注意：这里用元组语法 [...] 表示参数列表，比函数签名更贴近 Vue 的 emit 调用形式（如 emit('error', new Error(...))）。
避免常见错误写法
- 不用
any或unknown做事件载荷类型——失去校验意义 - 不混用运行时写法（如
defineEmits(['submit'])）和 TypeScript 类型——无法推导载荷结构 - 不把多个事件合并成一个泛型类型（如
{ submit: (data: any) => void }）——破坏事件粒度控制
与父组件 props 类型联动
事件载荷常和 props 类型相关。例如 props 定义了 user: User，那 select:user 事件就应发出 User 实例：
const props = defineProps()
const emit = defineEmits()
这样父组件监听时，TypeScript 能自动识别 user 参数的完整结构，IDE 补全和重构都可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
