$listeners
видалено несумісно
Огляд
Об'єкт $listeners
було видалено у Vue 3. Слухачі подій тепер є частиною об'єкта $attrs
:
js
{
text: 'Це атрибут.',
onClose: () => console.log('Подію "close" було викликано.')
}
2.x Синтаксис
У Vue 2 ви можете отримати доступ до атрибутів, що передаються вашим компонентам, за допомогою this.$attrs
, а до слухачів подій за допомогою this.$listeners
. У поєднанні з inheritAttrs: false
вони дозволяють розробнику застосувати ці атрибути і слухачі до якогось іншого елемента замість кореневого:
html
<template>
<label>
<input type="text" v-bind="$attrs" v-on="$listeners" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
3.x Синтаксис
У віртуальному DOM Vue 3 слухачі подій тепер є просто атрибутами з префіксом on
, і як такі є частиною об'єкта $attrs
, тому $listeners
було видалено.
vue
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
Якщо цей компонент отримав атрибут id
і слухач v-on:close
, об'єкт $attrs
тепер матиме такий вигляд:
js
{
id: 'my-input',
onClose: () => console.log('Подію "close" було викликано.')
}
Стратегія міграції
Видаліть усі використання $listeners
.
Migration build flag: INSTANCE_LISTENERS