Що таке emit?

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

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.

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 - події вгору.

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

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

Premium

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