vue.jsvuejs3

Emit listener gets removed from $attrs when event is declared in emits option


Vue 3 introduced the option to declare a components emitted events in the emits option, while also removing the $listeners attribute in favor of the $attrs.

In $attrs event listeners for events get added an prefixed with on so an event called click is accessed in the component through $attrs.onClick. But when the click events is declared in the emits option, it dissapears from $attrs.


Solution

  • This is made by design in Vue 3, since the $attrs attribute only is meant to include things not declared in the component.

    If you want to access the components event listeners, while having them declared, you can add a prop with the same name as the event prefixed with on and propagate the function into the component like a prop, like mentioned here.

    There's also a discussion on the Vue.js core Github about this behaviour here. Edit: The discussion has been stale for a while and it looks like the behaviour is here to stay.