$listeners
removed The $listeners
object has been removed in Vue 3. Event listeners are now part of $attrs
:
{ text: 'this is an attribute', onClose: () => console.log('close Event triggered') }
In Vue 2, you can access attributes passed to your components with this.$attrs
, and event listeners with this.$listeners
. In combination with inheritAttrs: false
, they allow the developer to apply these attributes and listeners to some other element instead of the root element:
<template> <label> <input type="text" v-bind="$attrs" v-on="$listeners" /> </label> </template> <script> export default { inheritAttrs: false } </script>
In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with on
, and as such are part of the $attrs
object, so $listeners
has been removed.
<template> <label> <input type="text" v-bind="$attrs" /> </label> </template> <script> export default { inheritAttrs: false } </script>
If this component received an id
attribute and a v-on:close
listener, the $attrs
object will now look like this:
{ id: 'my-input', onClose: () => console.log('close Event triggered') }
Remove all usages of $listeners
.
Migration build flag: INSTANCE_LISTENERS
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/listeners-removed