Що таке $emit?

VueJunior~1 хв читання

$emit - це метод екземпляра компонента Vue, який використовується для надсилання (генерування) користувацьких подій з дочірнього компонента батьківському.

Простіше кажучи:

$emit дозволяє компоненту "сказати" батьку, що щось відбулося. Батько може слухати цю подію через v-on / @.

Це ключовий механізм комунікації знизу вгору в компонентній архітектурі Vue.

Базовий приклад: дочірній → батько

Дочірній компонент:

html

<button @click="$emit('increment')">+</button>

Він "емітить" подію increment.

Батько:

html

<Counter @increment="count++" />

Тепер батько знає, що дочірній компонент надіслав сигнал.

Навіщо потрібен `$emit`?

обмін даними вгору по дереву
інформування батька про зміну стану
реалізація custom events
робота v-model у кастомних компонентах
декомпозиція логіки: "розумний батько - dumb child"

`$emit` + дані (передача аргументів)

Можна надсилати разом з подією дані:

Дочірній компонент:

this.$emit('select', item)

Батько:

html

<ItemList @select="onItemSelect" />

methods: {
  onItemSelect(item) {
    console.log("Обрано:", item)
  }
}

`$emit` у `v-model` (Vue 3)

Для роботи:

html

<MyInput v-model="value" />

Компонент повинен:

1) отримувати проп modelValue

2) емітити update:modelValue

html

<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>

Декларація подій (Vue 3)

У Vue 3 необхідно явно вказувати, які події компонент може емітити:

emits: ['save', 'update:modelValue']

Vue видасть попередження, якщо $emit викликано з невідомою подією - корисно для контролю API компонента.

`$emit` vs $on / $off (Vue 2)

$emit - надіслати подію
$on / $off - підписатися/відписатися (у Vue 3 ці методи видалені)

Важливі моменти

1. `$emit` працює лише в напрямку батько ← дитина

Компонент не може викликати метод батька напряму.

2. `$emit` не працює з батька в дитину - тільки події вгору.

3. Ім'я події бажано писати в kebab-case:

html

@user-selected="handle"

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.