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

# Обзор

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

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

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

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on: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 v-on: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 v-on:click="$emit('click', $event)">OK</button>
</template>

<script>
export default {
  emits: [] // без объявленного события
}
</script>

1
2
3
4
5
6
7
8
9

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

<my-button v-on:click="handleClick"></my-button>

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

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

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

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

# См. также

← Опцию data необходимо указывать только функцией Удалено API для событий →