Vue.js

# Удалено свойство $listeners
кардинальное изменение

# Обзор

Объект $listeners удалён в 3.x. Отслеживание событий теперь является частью $attrs:

{
  text: 'это какой-то атрибут',
  onClose: () => console.log('произошло событие close')
}
1
2
3
4

# Синтаксис в 2.x

Во Vue 2 можно получить доступ к атрибутам, переданным в компонент через this.$attrs, а также к обработчикам событий через this.$listeners. Вместе с inheritAttrs: false это позволяло разработчику применить эти атрибуты и обработчики событий к какому-то другому элементу вместо корневого:

<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
11

# Что изменилось в 3.x

В виртуальном DOM Vue 3 обработчики событий теперь просто атрибуты с префиксом on и являются частью объекта $attrs, поэтому $listeners были удалены.

<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
11

Если компонент получит атрибут id и обработчик события @close, то объект $attrs теперь будет выглядеть так:

{
  id: 'my-input',
  onClose: () => console.log('произошло событие close')
}
1
2
3
4

# Стратегия миграции

Удалить все случаи использования $listeners.

Флаг сборки для миграции: INSTANCE_LISTENERS

# См. также

← Изменения в API монтирования →