vue 3 事件参数校验靠 typescript 类型声明与运行时验证函数分层保障:defineemits 提供编译期类型检查,emits 选项中验证函数在开发环境运行时兜底,手动校验逻辑处理业务规则,形成完整校验链路。

Vue 3 中可以在触发事件前做参数校验,主要靠两种方式配合使用:TypeScript 类型声明 + 运行时验证函数。前者在编码和编译阶段拦截错误,后者在开发环境运行时给出明确提示——两者不冲突,而是分层保障。
用 defineEmits 做编译期类型校验
这是最推荐的第一道防线。通过泛型定义事件签名,让 TypeScript 在调用 emit 时就检查参数个数、类型、可选性:
- 单参数事件:写成
[value: string],传非字符串会直接报错 - 多参数事件:如
[id: number, status: 'active' | 'inactive'],少传、多传或类型错都会被 IDE 标红 - 重载写法支持同一事件不同参数组合,比如
(e: 'change', data: string) | (e: 'change', data: number, unit: string)
在 emit 调用前手动加逻辑判断
类型校验无法覆盖所有业务规则(比如“金额必须大于 0”、“邮箱必须含 @ 符号”),这时需要在调用 emit 前插入校验逻辑:

