# Удалено свойство $listeners
breaking
# Обзор
Объект $listeners удалён в 3.x. Отслеживание событий теперь является частью $attrs:
{
text: 'это какой-то атрибут',
onClose: () => console.log('произошло событие close')
}
1
2
3
4
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
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
2
3
4
5
6
7
8
9
10
11
Если компонент получит атрибут id и обработчик события v-on:close, то объект $attrs теперь будет выглядеть так:
{
id: 'my-input',
onClose: () => console.log('произошло событие close')
}
1
2
3
4
2
3
4
# Стратегия миграции
Удалить все случаи использования $listeners.