emits Declare Emitted Events
Last updated: 2026-10-22
emits Declare Emitted Events
The emits option documents and validates events a component fires; undeclared emissions warn in dev.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
emits: ["change", "submit"],
methods: {
fire() { this.$emit("change", 1) }
}
}⚙️ Arguments
| value | Array or object; the object form adds a validator |
|---|
Returns：No return — fire with this.$emit
▶ Example
Edit the code below and see the live result:
Output：
Clicking shows 'Message received: from child'.💡 Key Points
💡 Tip Declaring improves tooling support in both child and parent.
⚠️ Warning Include update:modelValue in emits when supporting v-model.
ℹ️ Note Prefer kebab-case event names — HTML attribute casing is insensitive.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What if emissions are undeclared?
A It still works but warns, and listeners may fall through unexpectedly.
Q Can multiple arguments be emitted?
A Yes — $emit('change', a, b) delivers them in order.
Q Can event names be camelCase?
A Avoid it — DOM templates lowercase names; kebab-case is safest.
