Using the recommended emit attribute removes the event namespace from the component attributes

[twickstrom]

Version

3.2.29

Reproduction link

stackblitz.com

Steps to reproduce

Create a component.

In the component add the emits option: emits: ['onDelete']
In the components template add an if statement to determine if the event is bound to the component v-if="$attrs.onOnDelete"

In the parent add an event handler such as @click="onDelete"

What is expected?

In the Vue3 docs it recommends to define what events a child component can emit to the parent https://v3.vuejs.org/guide/migration/emits-option.html#overview

If the parent binds the event onDelete I would expect the component to be displayed.

What is actually happening?

The component is not displayed.

---

See the discussion here: https://stackoverflow.com/questions/70272335/vue3-check-if-event-listener-is-bound-to-component-instance/70358655?noredirect=1#comment125169175_70358655

[sqal]

Declare it as as prop onDelete: Function. You will be able to check for existence, and still use emit('delete')

duplicate - #5220
example

[twickstrom]

Declare it as as prop onDelete: Function. You will be able to check for existence, and still use emit('delete')

duplicate - #5220

Agreed, there are a few work arounds. However I feel that lacking a way to check what is an allowed emit, per the documentation, especially as it pertains to more complex examples with multiple events, makes the recommendation of using the emits to define what can be emitted a bit useless.

Vue 3 now offers an emits option, similar to the existing props option. This option can be used to define the events that a component can emit to its parent.

Wouldn't it add value to this feature to add the allowed emitted values to the attrs? Or, access them via $emits or $emittable.

What is the technical or performance limitation to do so?

[lidlanca]

make your case in the RFC discussion, if it wasn't already made.
vuejs/rfcs#397

and don't hold your breath

[posva]

Duplicate of #5220