# $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')
}
1
2
3
4
2
3
4
# 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>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 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>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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')
}
1
2
3
4
2
3
4
# Migration Strategy
Remove all usages of $listeners
.
Migration build flag: INSTANCE_LISTENERS