Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке emit?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`emit` у Vue - це механізм, за допомогою якого **дочірній компонент надсилає подію батьківському компоненту**. Простіше кажучи: emit - це спосіб "сказати" батькові, що в дочірньому компоненті щось відбулося. Це протилежність props. **Ключове:** props передають дані вниз, emit - події вгору.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`emit` у Vue - це механізм, за допомогою якого **дочірній компонент надсилає подію батьківському компоненту**. Простіше кажучи: emit - це спосіб "сказати" батькові, що в дочірньому компоненті щось відбулося. Це протилежність props: | Напрям | Механізм | |---|---| | Батько → Дитина | props | | Дитина → Батько | emit | --- ## Простий приклад: кнопка повідомляє батька про клік #### Дочірній компонент (`ChildButton.vue`) ```javascript <script setup> const emit = defineEmits(['clicked']) function handleClick() { emit('clicked') } </script> <template> <button @click="handleClick">Click me</button> </template> ``` #### Батько: ```javascript <ChildButton @clicked="onChildClick" /> <script setup> function onChildClick() { console.log("Child button clicked!") } </script> ``` --- ## Навіщо потрібен emit? `emit` дозволяє: #### Повідомляти про дії користувача - клік по кнопці - введення тексту - вибір елемента #### Сигналізувати про внутрішні зміни Наприклад, компонент форми повідомляє: ```javascript emit('submit', formData) ``` #### Реалізовувати двостороннє зв'язування (`v-model`) Vue 3 використовує для цього подію: ```javascript emit('update:modelValue', newValue) ``` Це основа всіх кастомних інпутів. --- ## Як оголошувати emit? ### Спосіб 1: через `<script setup>` (рекомендується) ```javascript const emit = defineEmits(['save', 'delete']) ``` З параметрами: ```javascript emit('save', userData) ``` --- ### Спосіб 2: через Options API ```javascript export default { emits: ['save', 'delete'] } ``` І всередині: ```javascript this.$emit('save', payload) ``` --- ## Приклад: компонент Input з v-model #### Дочірній компонент: ```javascript <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) function updateValue(event) { emit('update:modelValue', event.target.value) } </script> <template> <input :value="modelValue" @input="updateValue"> </template> ``` #### Використання: ```javascript <MyInput v-model="username" /> ``` `username` оновлюватиметься щоразу, коли компонент надсилає emit. --- ## Приклад: компонент Modal повідомляє про закриття ```javascript <script setup> const emit = defineEmits(['close']) </script> <template> <div class="modal"> <button @click="emit('close')">Close</button> </div> </template> ``` Батько: ```javascript <Modal v-if="open" @close="open = false" /> ``` --- ## Правила роботи з emit - назва події - рядок - можна передавати дані: `emit('event', data)` - не можна викликати події, яких немає в `defineEmits` - події йдуть тільки **знизу вгору** --- ## Підсумок (шпаргалка) `emit` **- це механізм надсилання подій із дочірнього компонента батьківському.** Використовується для: - спілкування між компонентами, - передачі даних вгору, - реалізації `v-model`, - реакції на дії користувача. Головна ідея: props передають дані вниз, emit - події вгору.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.