While props flow down, events flow up. Children signal parents with emit—the Vue counterpart to passing callback props in React.
Declaring and using emits
emits: ['increment'],
setup(props, { emit }) {
function onClick() {
emit('increment');
}
return { onClick };
}Declare event names in emits for documentation and validation. In templates you can also use $emit('increment'), but calling emit inside setup keeps logic testable.
Payloads
Pass data with the second argument: emit('select', item.id). The parent listens with @select="onSelect" and receives the payload as the first handler argument.
Important interview questions and answers
- Q: emit vs mutating props?
A: Always prefer explicit events (or v-model) over prop mutation—one-way data flow stays predictable. - Q: How is emit like React?
A: Similar toonSave={() => ...}callback props, but Vue names events explicitly inemits.
Self-check
- Where do you declare allowed event names?
- How does the parent listen for
increment?
Challenge
Counter with emit
- Click the child button and confirm the parent count increases.
- Add a second emit
decrementand wire a minus button.
Done when: parent count updates from child button clicks via emits.
Tip: Name emits after user actions (save, close) or use update:modelValue for v-model-compatible components.