Vue3:检查事件侦听器是否绑定到组件实例

Question

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

<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中的新Vue3 (这是Vue3文档推荐的最佳实践)，则事件侦听器将不属于$attrs__。https://github.com/vuejs/core/issues/5319。

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

注意，我使用的是Vue 3.2.26。

在Vue3 $listeners被删除.

事件侦听器现在是$attrs的一部分。但是，简单地将控制台日志记录在this.$attrs中的Badge不会显示您要查找的键，它们在targets中，但可以通过将on放在绑定事件名称的前面进行访问。在您的例子中，在Badge组件中，您将使用onOnDelete。

​

​

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

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

Answer 2

父组件：

<ChildComponent @send-me="...">
        
</ChildComponent>

子组件：

内模板

<button
    v-if="$attrs.onSendMe"
    @click="$emit('send-me')"
>
    Send me!
</button>

在脚本设置中

const attrs = useAttrs()

if (attrs.onSendMe) {
    // ...
}