Що таке emit?

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

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

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

emit - це спосіб повідомити батька, що в дочірньому компоненті щось відбулося.

Це основний канал зв'язку знизу вгору (child -> parent). У Vue 3 використовується функція emit всередині setup().

Emit у Composition API (`setup`)

У setup emit передається як другий аргумент:

export default {
  setup(props, { emit }) {
    function handleClick() {
      emit('clicked', 123)
    }

    return { handleClick }
  }
}

Батько слухає:

html

<Child @clicked="onClick" />

Emit у `<script setup>`

Тут використовується defineEmits:

vue

<script setup>
const emit = defineEmits(['save', 'delete'])

function save() {
  emit('save', { id: 1 })
}
</script>

Emit в Options API

В Options API використовується $emit:

methods: {
  handleClick() {
    this.$emit('clicked', 123)
  }
}

Простий приклад

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

vue

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

Батько:

vue

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

Коли користувач натискає кнопку -> батько отримує подію.

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

1. Передача даних батьку

Наприклад, користувач обрав товар:

emit('select', item)

2. Реалізація `v-model` у компонентах

Ключовий механізм у Vue 3:

emit('update:modelValue', newValue)

3. Сигнал батьку про дії

Наприклад:

збереження
видалення
відправлення форми
зміна стану

4. Підтримка подій у кастомних компонентах

Emit - однонаправлений потік даних

Важливо:

props йдуть зверху вниз
emit йде знизу вгору

Це гарантує передбачувану архітектуру.

Підсумок (ідеально для співбесіди)

Emit - це спосіб надсилання користувацьких подій з дочірнього компонента батьківському. В Options API використовується this.$emit, у Composition API - emit із setup() або defineEmits(). Використовується для передачі даних, реакції на дії користувача і реалізації v-model.

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

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

Premium

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