Vue3: Check if event listener is bound to component instance

Question

I have a reusable Badge component. I want to be able to add a close/delete button when an onDelete event listener is present on the component instance.

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

If I add a v-if statement to the button, the emit event is executed immediately

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

I'm using Vue 3

How `onDelete emit is passed by the parent component` ? in this case only `color` and `square` are passed by parent — Vasile Radeanu, Dec 08 '21 at 09:52
Sorry, you can check if there exists `onDelete` listener in this way `v-if="$listeners.onDelete"` — Vasile Radeanu, Dec 08 '21 at 10:05
Can you `console.log(this.$attrs)` in mounted to check if `onOnDelete` property exists ? — Vasile Radeanu, Dec 08 '21 at 11:14
Yes, this is a log from this.$attrs: https://i.stack.imgur.com/A0GuP.png — Thore, Dec 08 '21 at 12:13
I would suggest changing the title of this post FROM Vue3: Check if emit is passed to component TO: Vue3: Check if event listener is bound to component. $emit is not what is being passed to the component. I had to read through this 10 times to understand what you were after. — Tim Wickstrom, Dec 15 '21 at 05:05

score 14 · Accepted Answer · edited Sep 06 '22 at 19:08

14

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.

I have simplified your example above in StackBlitz to isolate the functionality you are after.

Important note, I am using Vue 3.2.26.

In Vue3 $listeners were removed.

Event listeners are now part of $attrs. However simply console logging this.$attrs in Badge won't display the key you are looking for, they are within targets but accessible by prepending on to the bound event name. In your case in the Badge component you will use onOnDelete.

Complete working example with Two Badges. One will display because it has a bound event onDelete, the other will not due to the fact that the bound onDelete is not present.

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

edited Sep 06 '22 at 19:08

tony19

125,647
18
229
307

answered Dec 15 '21 at 05:00

Tim Wickstrom

5,476
3
25
33

The example is working but it wasn't working in my project. The problem is `emits: ['onDelete']` in the script tags. When added `v-if="$attrs.onOnDelete"` isn't working. Without it's working – Thore Dec 15 '21 at 08:08
1

@Thore very interesting. I just verified this. You may want to consider reporting this issue to the Vue team – Tim Wickstrom Dec 15 '21 at 14:26
@TimWickstrom Did you end up creating an issue I can track? – Max van de Laar Jan 21 '22 at 14:45
1

@MaxvandeLaar I do not believe it was submitted and it is explained why here https://v3.vuejs.org/api/options-data.html#emits and here https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance – Tim Wickstrom Jan 24 '22 at 20:24
1

I'll add a feature request now – Tim Wickstrom Jan 24 '22 at 20:25
https://github.com/vuejs/core/issues/5319 – Tim Wickstrom Jan 24 '22 at 20:43
1

@TimWickstrom Thanks! The proposed workaround feels just wrong to me. I hope the RFC has a chance to succeed. – Max van de Laar Jan 26 '22 at 08:47
Agreed. It seems very counter intuative to release, document, and promote emits, but then have it break other established functionality when used. – Tim Wickstrom Jan 26 '22 at 10:08

Vue3: Check if event listener is bound to component instance

1 Answers1