defineEmits 声明ts类型时候为什么要加e

定义 defineEmits 的 TypeScript 类型
在 Vue 3 中使用 <script setup> 和 TypeScript 结合时，为了给组件的自定义事件提供类型安全的支持，通常会通过泛型来指定 defineEmits 接受哪些类型的参数。这里的参数名习惯上被命名为 'e' 或者其他单字母名称，但这并不是强制性的命名约定；而是出于简洁性和惯例考虑。
当声明 defineEmits 并为其传递接口或联合类型作为泛型参数时，实际上是在告诉编译器这些特定名字的事件将会携带什么类型的数据。例如：
const emit = defineEmits<{
(event: 'messageToParent', e: string): void;
}>();
登录后复制
上述代码片段表明该组件能够触发名为 messageToParent 的事件，并且此事件附带一个字符串类型的参数 e[^1]。
这种做法不仅提高了代码可读性，还能够在调用 emit 方法发送消息回父级的时候获得更好的 IDE 支持以及静态检查能力，从而减少运行时错误的发生几率。
对于为何选择 'e' 来代表事件数据的原因之一是因为它是一个简短且通用的名字，在很多编程场景下用来指代某个临时实体或者输入输出值。不过值得注意的是，开发者完全可以根据个人喜好或是团队编码规范选用不同的变量名代替 'e' 只要保持一致性即可[^2]。
使用示例
下面给出一段完整的子组件模板及其脚本部分，展示了如何利用带有类型标注的 defineEmits 实现父子组件间的通讯功能：
<template>
<button @click="sendMessage">Click me!</button>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';

interface EmitEvents {
(event: 'customEventName', e: string | number): void;
}

// 使用更具体的类型替代 any 提升安全性
const emit = defineEmits<EmitEvents>();

function sendMessage() {
let msgContent = "This is a test message";
// 此处传入的消息会被视为已知类型的'e'
emit('customEventName', msgContent);
}
</script>
登录后复制
在此案例中，每当点击按钮就会执行 sendMessage() 函数并向外发出一次包含字符串形式信息的 customEventName 事件[^3]。