Skip to content
The translation is synced to the docs on of which the commit hash is 794629c.

$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

Дивіться також