Опція `emits`
нове

Огляд

Vue 3 тепер пропонує опцію emits, подібну до існуючої опції props. Цю опцію можна використовувати для визначення подій, які компонент може випромінювати своєму батьківському компоненту.

Поведінка 2.x

У Vue 2 ви можете визначити реквізити, які отримує компонент, але ви не можете оголосити, які події він може випромінювати:

vue

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>

Поведінка 3.x

Подібно до реквізитів, події, які випромінює компонент, тепер можна визначити за допомогою опції emits:

vue

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

Параметр також приймає об'єкт, який дозволяє розробнику визначати валідатори для аргументів, які передаються разом із випроміненою подією, подібно до валідаторів у визначеннях props.

Щоб дізнатися більше про це, прочитайте документацію API для цієї особливості.

Стратегія міграції

Настійно рекомендуємо документувати всі події, створені кожним із ваших компонентів, за допомогою emits.

Це особливо важливо через видалення модифікатора .native. Усі слухачі подій, які не оголошено за допомогою emits, тепер будуть включені в $attrs компонента, який за замовчуванням буде прив'язаний до кореневого вузла компонента.

Приклад

Для компонентів, які повторно випромінюють рідні події своїм батькам, це призведе до запуску двох подій:

vue

<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // без оголошеної події
}
</script>

Коли батьківський елемент прослуховує подію click на компоненті:

html

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

тепер він буде активований двічі:

Один раз із $emit().
Один раз із власного слухача подій, застосованого до кореневого елемента.

Тут у вас є два варіанти:

Правильно оголосити подію click. Це корисно, якщо ви справді додаєте певну логіку до цього обробника подій у <my-button>.
Вилучити повторне надсилання події, оскільки батьківський елемент тепер може легко прослуховувати власну подію, без додавання .native. Підходить, коли вам справді треба лише повторно випромінювати подію.

Опція emits нове #

Огляд #

Поведінка 2.x #

Поведінка 3.x #

Стратегія міграції #

Приклад #