$emit() Emit a Component Event
Last updated: 2026-10-22
$emit() Emit a Component Event
$emit fires a custom event whose arguments arrive in the parent's listener — the standard child-to-parent channel.
| Group | Options: Composition & Misc |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
methods: {
save() { this.$emit("save", { id: 1 }) }
}
}⚙️ Arguments
| value | An event name plus any payload arguments |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
Clicking shows the payload id.💡 Key Points
ℹ️ Note Declare names in emits to avoid warnings and gain tooling.
💡 Tip Prefer kebab-case names in DOM templates.
⚠️ Warning Event names are case-sensitive and lowercased in DOM templates.
🏷️ Related Composition & Misc
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Versus calling child methods?
A Emitting keeps one-way flow; ref calls couple components.
Q Can several arguments be passed?
A Yes — the handler receives them in order.
Q What if nobody listens?
A Nothing happens — events are optional.
