What is $emit?
$emit is a Vue component instance method used to send (emit) custom events from a child component to its parent.
In simpler terms:
$emitlets a component "tell" its parent that something happened. The parent can listen for that event viav-on/@.
This is the key mechanism for bottom-up communication in Vue's component architecture.
Basic example: child → parent
Child component:
<button @click="$emit('increment')">+</button>It "emits" the increment event.
Parent:
<Counter @increment="count++" />Now the parent knows that the child component sent a signal.
Why do you need $emit?
- exchanging data up the tree
- notifying the parent of a state change
- implementing custom events
- making
v-modelwork in custom components - decomposing logic: a "smart parent, dumb child"
$emit + data (passing arguments)
You can send data together with the event:
Child component:
this.$emit('select', item)Parent:
<ItemList @select="onItemSelect" />methods: {
onItemSelect(item) {
console.log("Selected:", item)
}
}$emit in v-model (Vue 3)
For this to work:
<MyInput v-model="value" />The component must:
1) receive the modelValue prop
2) emit update:modelValue
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>Declaring events (Vue 3)
In Vue 3 you must explicitly declare which events a component can emit:
emits: ['save', 'update:modelValue']Vue will issue a warning if $emit is called with an unknown event, which is useful for controlling the component's API.
$emit vs $on / $off (Vue 2)
$emit- send an event$on/$off- subscribe/unsubscribe (in Vue 3 these methods have been removed)
Important points
1. $emit only works in the direction parent ← child
A component cannot call a parent's method directly.
2. $emit does not work from parent to child, only events going up.
3. Event names are best written in kebab-case:
@user-selected="handle"Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.