# $listeners supprimé
breaking
# Vue d'ensemble
L'objet $listeners a été supprimé dans Vue 3. Les écouteurs d'événements font maintenant partie de $attrs :
{
text: 'this is an attribute',
onClose: () => console.log('close Event triggered')
}
2
3
4
# Syntaxe 2.x
Dans Vue 2, vous pouvez accéder aux attributs passés à vos composants avec this.$attrs, et aux écouteurs d'événements avec this.$listeners.
En combinaison avec inheritAttrs : false, ils permettent au développeur d'appliquer ces attributs et listeners à un autre élément au lieu de l'élément racine :
<template>
<label>
<input type="text" v-bind="$attrs" v-on="$listeners" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
2
3
4
5
6
7
8
9
10
# Syntaxe 3.x
Dans le DOM virtuel de Vue 3, les écouteurs d'événements sont maintenant juste des attributs, préfixés par on, et en tant que tels font partie de l'objet $attrs, donc $listeners a été supprimé.
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
2
3
4
5
6
7
8
9
10
Si ce composant a reçu un attribut id et un écouteur v-on:close, l'objet $attrs ressemblera maintenant à ceci :
{
id: 'my-input',
onClose: () => console.log('close Event triggered')
}
2
3
4
# Stratégie de migration
Supprimez tous les usages de $listeners.