How do child components emit events to parents in Vue?
Learn how Vue children send data to parents with emit and defineEmits, listen with @ handlers, and keep one-way data flow — with clear examples.
Expected Interview Answer
A Vue child component sends data upward by emitting a custom event with $emit (or the emit function from defineEmits in the Composition API), and the parent listens for that event with a v-on / @ handler on the child's tag.
Props flow down and events flow up: the child never mutates a prop directly, it emits an event the parent handles to change its own state. In Vue 3 you declare emitted events with defineEmits (or the emits option), which documents the component's public event API, enables validation, and stops the event being auto-applied as a native listener. The parent receives any payload passed as the second argument to emit.
- Keeps one-way data flow predictable
- Documents a component's public events via defineEmits
- Decouples child from parent implementation
- Enables payload validation on emitted events
- Supports v-model through update:modelValue events
AI Mentor Explanation
A fielder cannot change the scoreboard himself; when he takes a catch he raises his hand and shouts to the scorer, who then updates the total. The fielder is the child emitting a 'wicket' event with the batsman's name as payload, and the scorer is the parent who owns the score and decides how to react to the signal.
Step-by-Step Explanation
Step 1
Declare the event
In the child, call const emit = defineEmits(['submit']) so the emitted event is part of the documented public API.
Step 2
Emit with a payload
On the relevant interaction call emit('submit', formData) — the second argument is the data sent to the parent.
Step 3
Listen in the parent
Render the child as <MyForm @submit="handleSubmit" /> so the parent's method runs when the event fires.
Step 4
Handle and update state
In handleSubmit(payload) the parent mutates its own reactive state — the child never touches the parent's data directly.
Step 5
Keep flow one-directional
Never mutate a received prop in the child; emit an event and let the owner change the source of truth.
What Interviewer Expects
- Understanding of one-way data flow (props down, events up)
- Correct use of $emit / defineEmits and @ listeners
- Knowing you should not mutate props directly
- How payloads are passed as the second emit argument
- Connection between emitted events and v-model
Common Mistakes
- Mutating a prop in the child instead of emitting an event
- Forgetting to declare events with defineEmits or the emits option
- Using a listener name that does not match the emitted event name
- Trying to return a value from emit as if it were a function call
- Confusing kebab-case template listeners with camelCase event names
Best Answer (HR Friendly)
“In Vue, a child component tells its parent something happened by raising a named event and optionally attaching some data, and the parent listens for it and decides what to do. It keeps information flowing in one clear direction, so the app stays predictable and easy to debug.”
Code Example
<script setup>
const emit = defineEmits(['submit'])
function onClick() {
emit('submit', { name: 'Ada' })
}
</script>
<template>
<button @click="onClick">Save</button>
</template><script setup>
import ChildForm from './ChildForm.vue'
function handleSubmit(payload) {
console.log('received', payload.name)
}
</script>
<template>
<ChildForm @submit="handleSubmit" />
</template>Follow-up Questions
- How does v-model use emitted events under the hood?
- What is the difference between defineEmits and the emits option?
- How do you validate an emitted event's payload?
- Why should a child never mutate a prop directly?
- How would you pass an event several levels up the tree?
MCQ Practice
1. How does a child component send data to its parent in Vue?
The child calls emit('eventName', payload) and the parent listens with @eventName; children must never mutate props directly.
2. What does defineEmits primarily provide in <script setup>?
defineEmits returns the emit function and documents which events the component can emit, enabling validation and correct listener handling.
3. Where does the data sent with an emitted event go?
The first argument is the event name; the payload is passed as the second (and later) arguments and received by the parent handler.
Flash Cards
How do props and events flow in Vue? — Props flow down from parent to child; events flow up from child to parent via emit.
How does a child emit an event? — It calls emit('name', payload) after declaring the event with defineEmits or the emits option.
How does a parent listen? — With v-on / @name on the child's tag, e.g. <Child @submit="handler" />.
Can a child mutate a prop? — No — it should emit an event and let the parent, which owns the data, update it.