Vue Composition API 中强制要求定义事件发射

在 vue Composition API 中，有时我们需要确保组件的使用者必须监听特定的事件。虽然 defineEmits 可以定义组件可以发出的事件，但它并不能强制使用者必须监听这些事件。本文介绍一种在开发环境下检查事件监听器是否被定义的方法，从而帮助开发者尽早发现潜在的问题。

检查事件监听器是否存在

vue 中，@foo 这样的事件监听器会被编译成 onfoo 这样的 prop 传递给组件的 vnode。因此，我们可以通过检查组件实例的 vnode.props 中是否存在相应的 onfoo prop 来判断事件监听器是否被定义。

以下是一个用于检查事件监听器是否存在的函数：

import { getCurrentInstance } from 'vue'; import { toPascalCase } from '@vue/shared';  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; }

代码解释：

1. getCurrentInstance(): 获取当前组件实例。 需要确保在 setup 函数中调用此函数。
2. import.meta.env.DEV: 只在开发环境下执行检查。
3. vnode.props: 获取组件 vnode 上的 props。
4. toPascalCase(name): 将事件名转换为 PascalCase 形式（例如，handle-close 转换为 HandleClose）。Vue 会将事件监听器编译成 onPascalCase 的 prop。@vue/shared 导出的toPascalCase 函数可以帮助我们进行转换。
5. props[propName]: 检查是否存在对应的 onPascalCase prop。
6. console.warn(): 如果 prop 不存在，则发出警告。

使用示例

在组件中使用 checkEmits 函数：

<script setup> import { defineEmits } from 'vue'; import { checkEmits } from './utils'; // 假设 checkEmits 函数定义在 utils.js 文件中  const emit = defineEmits(['handleClose', 'handleSubmit']);  checkEmits('handleClose');  defineProps({   isOpen: {     type: Boolean,     required: true   } });  // ... 组件逻辑 </script>  <template>   <div>     <!-- 组件内容 -->     <button @click="emit('handleClose')">关闭</button>   </div> </template>

注意事项：

立即学习“前端免费学习笔记（深入）”；

• checkEmits 函数只能在 setup 函数中使用，因为 getCurrentInstance 只有在组件初始化时才能获取到组件实例。
• 此方法只在开发环境下生效，不会影响生产环境的性能。
• 确保正确引入和使用 toPascalCase 函数，可以使用 @vue/shared 中的 toPascalCase 方法，也可以使用其他方式实现。
• 如果使用 typescript，可以添加类型定义，使代码更加健壮。

总结

通过自定义 checkEmits 函数，我们可以在开发环境下强制组件使用者定义特定的事件监听器。这有助于提高代码的健壮性和可维护性，减少潜在的错误。这种方法利用了 Vue 将事件监听器编译成 props 的特性，通过检查 props 的存在性来判断事件监听器是否被定义。虽然此方法只在开发环境下生效，但它可以帮助开发者尽早发现问题，避免在生产环境中出现意料之外的错误。