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

    <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" />

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

    export default {
        props: {
            color: { type: String },
            square: { type: Boolean, default: false },
        components: {
        emits: ['onDelete'],

如果我向按钮添加 v-if 语句,则立即执行发出事件

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

我正在使用 Vue 3

stack overflow Vue3: Check if event listener is bound to component instance
author avatar


UPDATE: If your component is using the new [emits option]( in Vue3, which is the recommended best practice from the Vue3 docs, the event listeners will not be apart of the $ attrs . [An issue will be submitted to the Vue team for clarification and guidance on why this behaves this way](


重要说明,我使用VUE 3.2.26。

在vue3 $listeners were removed 中。

事件听众现在是 $attrs 的一部分。但是, this.$attrs 中的控制台记录 Badge 不会显示您要寻找的键,它们在 targets 内,但可以通过将 on 进行预访问,以访问bound Event Name。在 Badge 组件中,您将使用 onOnDelete

[enter image description here ](

完成两个徽章的工作示例。一个会显示,因为它具有绑定事件 onDelete ,另一个不会因为绑定 onDelete 不存在的事实。