$listeners removed

breaking

#

Overview #

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

2.x Syntax #

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>

3.x Syntax #

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