What is $emit?
$emit is a Vue mechanism (Options API) that lets a child component send an event to the parent component.
In simple terms:
$emitis a way to tell the parent that something happened inside the child component.
This is a direct communication channel from bottom to top: child → parent.
How $emit works (Options API)
Child component
js
export default {
methods: {
handleClick() {
this.$emit('clicked', 42)
}
}
}Parent component
html
<Child @clicked="onChildClick" />js
methods: {
onChildClick(payload) {
console.log(payload) // 42
}
}What does $emit do?
- Fires a custom event ("clicked", "save", "update", etc.)
- Passes data to the parent component
- Enables two-way interaction between components
Where is $emit used?
1. To notify the parent of events
For example:
js
this.$emit('submit')
this.$emit('remove', item)2. For a custom v-model
In Vue 3 the model is based on an event:
js
this.$emit('update:modelValue', newValue)3. For interaction between components in the tree
When you need to send data upward.
$emit in the Composition API
In setup(), $emit is not available directly, the emit function is used instead:
js
export default {
setup(props, { emit }) {
emit('clicked', 123)
}
}In <script setup>:
vue
<script setup>
const emit = defineEmits(['clicked'])
function onClick() {
emit('clicked', 123)
}
</script>Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.