Vue.js

# Добавлена опция emits
новое

# Обзор

Vue 3 теперь предоставляет опцию emits, похожую на существующую опцию props. Её можно использовать для объявления событий, которые могут быть сгенерированы компонентом для своих родителей.

# Поведение в 2.x

Во Vue 2 можно объявлять входные параметры, которые компонент получает, но нет возможности объявить какие события он может генерировать:

<template>
  <div>
    <p>{{ text }}</p>
    <button @click="$emit('accepted')">OK</button>
  </div>
</template>

<script>
  export default {
    props: ['text']
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# Поведение в 3.x

Аналогично входным параметрам, теперь можно определить события которые генерирует компонент с помощью опции emits:

<template>
  <div>
    <p>{{ text }}</p>
    <button @click="$emit('accepted')">OK</button>
  </div>
</template>

<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Опция также принимает объект, что позволяет указать валидаторы для аргументов, которые передаются вместе с генерируемым событием, аналогично валидации при объявлении props.

Для получения дополнительной информации, ознакомьтесь с документацией API для этой возможности.

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

Настоятельно рекомендуется документировать все события, которые может генерировать компонент с помощью emits.

Это особенно важно из-за удаления модификатора .native. Теперь любой слушатель события, не указанный в emits, будет добавлен в свойство $attrs компонента, что по умолчанию станет привязывать его к корневому узлу компонента.

# Пример

Для компонентов, которые переопределяют нативные события для своих родителей, это приведёт к генерации двух событий:

<template>
  <button @click="$emit('click', $event)">OK</button>
</template>

<script>
export default {
  emits: [] // без объявленного события
}
</script>
1
2
3
4
5
6
7
8
9

Когда родитель прослушивает событие click на компоненте:

<my-button @click="handleClick"></my-button>
1

обработчик события будет вызван дважды:

  • Один раз от $emit().
  • Один раз от нативного обработчика события, привязанного к корневому элементу.

Здесь есть два варианта:

  1. Корректно объявить событие click. Это полезно, если действительно добавите некоторую логику в обработчик события в <my-button>.
  2. Удалить повторную генерацию события, так как родитель может легко отслеживать нативные события, без добавления .native. Подходит в тех случаях, когда действительно генерируете заново событие в любом случае.

# См. также

← Удалено API для событий →