Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке $emit?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`$emit`** - це метод екземпляра компонента Vue, який використовується для надсилання користувацьких подій з дочірнього компонента батьківському, а батько слухає їх через `v-on`/`@`. **Ключове:** `$emit` працює лише в напрямку батько ← дитина; компонент не може викликати метод батька напряму.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`$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` + дані (передача аргументів) Можна надсилати разом з подією дані: ### Дочірній компонент: ```js this.$emit('select', item) ``` ### Батько: ```html <ItemList @select="onItemSelect" /> ``` ```js 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 необхідно явно вказувати, які події компонент може емітити: ```js 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" ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.