Що таке $emit?
$emit - це механізм Vue (Options API), який дозволяє дочірньому компоненту надсилати подію батьківському компоненту.
Простіше кажучи:
$emit- це спосіб повідомити батька, що всередині дочірнього компонента відбулася якась дія.
Це прямий канал зв'язку знизу вгору: child → parent.
Як працює $emit (Options API)
Дочірній компонент
js
export default {
methods: {
handleClick() {
this.$emit('clicked', 42)
}
}
}Батьківський компонент
html
<Child @clicked="onChildClick" />js
methods: {
onChildClick(payload) {
console.log(payload) // 42
}
}Що робить $emit?
- Викликає користувацьку подію ("clicked", "save", "update" тощо)
- Передає дані батьківському компоненту
- Дозволяє двосторонню взаємодію між компонентами
Де застосовується $emit?
1. Для сповіщення батька про події
Наприклад:
js
this.$emit('submit')
this.$emit('remove', item)2. Для кастомного v-model
У Vue 3 модель заснована на події:
js
this.$emit('update:modelValue', newValue)3. Для взаємодії між компонентами в дереві
Коли потрібно надіслати дані нагору.
$emit у Composition API
У setup() $emit недоступний напряму, замість нього використовується функція emit:
js
export default {
setup(props, { emit }) {
emit('clicked', 123)
}
}У <script setup>:
vue
<script setup>
const emit = defineEmits(['clicked'])
function onClick() {
emit('clicked', 123)
}
</script>Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.