Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

vue.js

vuejs3

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.

like image 558
Lars Avatar asked Sep 11 '25 12:09

Lars


1 Answers

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.

like image 118
Lars Avatar answered Sep 13 '25 05:09

Lars