Vue3：检查事件监听器是否绑定到组件实例

Question

我有一个可重复使用的徽章组件。当组件实例上存在 onDelete 事件侦听器时，我希望能够添加关闭/删除按钮。

<template>
    <div class="flex inline-flex items-center px-2.5 py-0.5 text-xs font-medium select-none" :class="[square ? '' : 'rounded-full']">
        <slot />
        <button class="cursor-pointer ml-2" @click="$emit('onDelete')">
            <XIcon class="flex-shrink-0 h-3.5 w-3.5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
        </button>
    </div>
</template>

<script>
    import { XIcon } from '@heroicons/vue/solid';

    export default {
        props: {
            color: { type: String },
            square: { type: Boolean, default: false },
        },
        components: {
            XIcon,
        },
        emits: ['onDelete'],
    };
</script>

如果我在按钮上添加 v-if 语句，则立即执行 emit 事件

<button v-if="$emit('onDelete')" class="cursor-pointer ml-2" @click="$emit('onDelete')">

我正在使用 Vue 3

Answer 1

更新：如果您的组件在 Vue3 中使用新的 emits option，这是 Vue3 文档中推荐的最佳实践，则事件侦听器将不会与 $attrs 分开。将向 Vue 团队提交一个问题，以澄清和指导这种行为的原因。

---

我在 StackBlitz 中简化了您上面的示例，以隔离您所追求的功能。

重要提示，我使用的是 Vue 3.2.26。

在 Vue3 中 $listeners were removed.

事件监听器现在是$attrs 的一部分。但是，在Badge 中简单地控制台记录this.$attrs 不会显示您要查找的密钥，它们在targets 内，但可以通过在绑定事件名称前添加on 来访问。在Badge 组件中，您将使用onOnDelete。

带有两个徽章的完整工作示例。一个会显示，因为它有一个绑定事件onDelete，另一个不会显示，因为绑定的onDelete 不存在。

https://stackblitz.com/edit/vue-8b6exq?devtoolsheight=33&file=src/components/Badge.vue