Vue $emit() Method
Vue $emit() Method
It allows a child component to send events (and data) to its parent.
What is Vue $emit() Method?
$emit() triggers a custom event from a child component that the parent listens to.
Data flow:
- Clean communication
- One-way data flow
- Core Vue concept
Basic Syntax
Parent listens using:
Basic Example
Child Component
Parent Component
Emitting Data with $emit()
You can pass arguments with the event.
Child
Parent
Multiple Arguments
$emit() with v-for Components
Very common in lists.
Child:
Parent:
Declaring Events with emits (Vue 3 – Recommended)
Helps with validation & readability.
With validation:
$emit() with v-model (Behind the Scenes)
Used by:
Event Naming Rules
- Use kebab-case in templates
- Use camelCase in JS
$emit() vs Props (Important)
| Feature | Props | $emit() |
|---|---|---|
| Direction | Parent → Child | Child → Parent |
| Purpose | Pass data | Send events |
| Mutability | Read-only | Trigger action |
- Props for data
$emit()for actions
Common Mistakes
- Mutating props instead of emitting
- Forgetting to listen in parent
- Using
$emit()between siblings - Overusing emits for state (use store)
Best Practices
- Use
$emit()for user actions - Declare events with
emits Keep event names clear (save,delete,update)- Don’t emit too deeply (consider state management)
Summary Table
| Task | Use |
|---|---|
| Child → Parent | $emit() |
| Send data | $emit('event', data) |
| Validate events | emits |
| Update v-model | update:modelValue |
| Lists actions | $emit() + v-for |
Conclusion
The $emit() method is the backbone of component communication in Vue.
Mastering $emit() helps you build clean, scalable, and maintainable component-based apps.
