Vue子组件能否检测父组件是否定义了对应事件处理器

给定子组件 Foo.vue：

<template>
  ...
  <button @click="emit('bah', ...)">...</button>
  ...
</template>

<script setup>
const emit = defineEmits(['bah'])
...
</script>

请问在Foo.vue内部是否可以检测父组件是否实际定义了@bah事件？例如父组件中使用：

...
<div>
<Foo @bah="doSomething"/>
</div>
...

Vue 2 曾有$listeners数组，原本以为检测方式会类似使用useSlots()判断父组件是否使用插槽，但相关资料较少。官方文档表明监听器已合并到$attrs中，不过在onMounted中调用useAttrs()却看不到任何监听器：

<script setup>
import {onMounted, useAttrs} from 'vue'

const attrs = useAttrs()

onMounted(() => {
  console.log(attrs) // 没有监听器输出
})
...
</script>

[编辑补充] 文档指出defineEmits会清除useAttrs中的相关内容，那是否意味着必须手动定义事件处理器才能检测父组件是否绑定了该事件？

是的，因为在<script setup>中使用defineEmits声明的事件，会被Vue从attrs中移除，所以无法通过useAttrs()获取到这些已声明的事件绑定。

要检测父组件是否绑定了@bah事件，有两种可行方式：

• 通过getCurrentInstance访问内部实例
  可以借助Vue的内部APIgetCurrentInstance获取组件实例，然后从vnode.props中检查是否存在对应的事件处理器（事件名会被处理为onBah的驼峰形式）：

  <script setup>
  import { getCurrentInstance, onMounted } from 'vue'
  
  const instance = getCurrentInstance()
  
  onMounted(() => {
    // 检查是否存在@bah事件绑定
    const hasBahListener = !!instance?.vnode.props?.onBah
    console.log(hasBahListener)
  })
  </script>
  

  注意：getCurrentInstance属于内部API，可能在Vue的未来版本中发生变化，生产环境使用需谨慎。

• 手动将事件作为props传入（更推荐）
  如果你希望更稳妥且符合Vue的设计规范，可以将事件处理器作为props显式传入：

  <!-- Foo.vue -->
  <script setup>
  const props = defineProps({
    onBah: Function
  })
  
  onMounted(() => {
    const hasBahListener = !!props.onBah
    console.log(hasBahListener)
  })
  </script>
  

  父组件使用时：

  <Foo :on-bah="doSomething" />
  

  这种方式完全符合Vue的组件通信规范，没有依赖内部API，更稳定可靠。

内容的提问来源于stack exchange，提问作者Jay Edwards