在 Vue 3 Composition API 中，defineEmits 用于声明组件可以触发的事件。然而，仅仅声明事件并不能强制组件的使用者监听这些事件。为了确保关键事件被正确处理，我们需要一种机制来检查组件使用者是否提供了相应的事件监听器。本文将介绍如何通过自定义函数实现这一功能，并在开发环境下发出警告。
实现原理
Vue 在编译时会将 @foo 事件监听器转换为 vnode 上的 onFoo prop。因此，我们可以通过检查组件实例的 vnode props 中是否存在 onFoo 属性，来判断是否定义了 @foo 事件监听器。
实现步骤
立即学习“前端免费学习笔记（深入）”；
-
创建 checkEmits 函数:
import { getCurrentInstance } from 'vue'; function toPascalCase(str) { return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) { if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces return index === 0 ? match.toLowerCase() : match.toUpperCase(); }).replace(/[\s-]/g, ""); } function checkEmits(...eventNames) { let props; if (import.meta.env.DEV && (props = getCurrentInstance()?.vnode.props)) { for (const name of eventNames) { const propName = 'on' + toPascalCase(name); if (typeof props[propName] !== 'function') console.warn(`${name} event listener is missing`); } } return eventNames; }- getCurrentInstance(): 获取当前组件实例。
- import.meta.env.DEV: 确保只在开发环境下进行检查。
- vnode.props: 获取组件实例的 vnode props。
- toPascalCase(name): 将事件名转换为 PascalCase 形式，例如将 handle-close 转换为 HandleClose。
- 遍历 eventNames 数组，检查是否存在对应的 onEventName prop。
- 如果 prop 不存在或类型不是函数，则发出警告。
-
在组件中使用 checkEmits 函数:
- 在 defineEmits 声明事件之后，立即调用 checkEmits 函数，传入需要强制监听的事件名称。
注意事项
- 此方法仅在开发环境下生效，不会影响生产环境的性能。
- 可以根据实际需求修改 checkEmits 函数，例如自定义警告信息或添加更复杂的检查逻辑。
- 该方法主要用于提醒开发者，并不能完全阻止组件使用者忽略必要的事件监听。
总结
通过自定义 checkEmits 函数，我们可以在 Vue 3 Composition API 中实现强制要求组件使用者监听特定事件的功能。这有助于提高代码质量，减少潜在的错误，并增强组件的可维护性。 虽然不能完全强制，但可以起到很好的提示作用，帮助开发者避免遗漏关键事件的处理。
