Что такое emit

Question

Что такое emit

Тип вопроса: Паттерны Вероятность: 10% Категория: Frontend Разработчик

Ответ

Emit — это механизм передачи данных от дочернего компонента родительскому в Vue.js. Дочерний компонент "испускает" событие с данными, а родительский подписывается на это событие и обрабатывает его.

Пример:

<!-- ChildComponent.vue -->
<button @click="$emit('customEvent', data)">Click me</button>

<!-- ParentComponent.vue -->
<ChildComponent @customEvent="handleEvent"/>

Ключевые особенности:

Имя события должно быть в kebab-case
Можно передавать любое количество аргументов
В Composition API используется defineEmits()
Альтернатива props для передачи данных вверх по иерархии

Это основной способ реализации паттерна "сверху-вниз props, снизу-вверх events" во Vue.

Ответ 18+ 🔞

Да ты посмотри, какая хуйня интересная! Вот сидишь ты, пишешь свой компонентик, а он тебе как бы говорит: «Слушай, папаша, тут у меня внутри что-то случилось, держи инфу». Это и есть emit, ёпта!

Представь: есть у тебя кнопка в дочернем компоненте — тупая, безмозглая, блядь. Её задача — тыкнуть и сдохнуть. Но ты же хочешь, чтобы родительский компонент, этот большой начальник, узнал об этом тыке и что-то сделал. Вот она и кричит на всю иерархию: «Эй, предок, лови событие!». А родитель, такой хитрая жопа, уже подслушивает.

Смотри, как это выглядит в коде, тут всё просто, блядь:

<!-- ChildComponent.vue -->
<button @click="$emit('customEvent', data)">Click me</button>

Вот эта строчка $emit('customEvent', data) — это и есть наш крик в темноту. «Эй, я событие customEvent испускаю, и вот тебе, папаша, в зубы данные data!».

А родитель, такой довольный, подставляет ухо:

<!-- ParentComponent.vue -->
<ChildComponent @customEvent="handleEvent"/>

Видишь? Он ловит это самое customEvent и пихает в свой метод handleEvent. Всё, связь установлена, данные пошли наверх! Паттерн, блядь, священный: сверху вниз — пропсы (props), снизу вверх — события (events). Красота!

Запомни ещё, чувак, два нюанса, а то обосрёшься потом:

Имена событий пиши через дефис, в kebab-case. Не customEvent, а custom-event. Vue такой привередливый, блядь.
В этом новомодном Composition API уже не $emit, а defineEmits() используют. Но суть-то одна — орать на родителя, когда что-то происходит.

Вот и вся магия, ёбушки-воробушки. Дочка крикнула — папа услышал. Проще пареной репы, если, конечно, не запутаться в этих подписках, а то будет пиздец.