Vue Events

Children speak to parents by emitting events. Parents listen with @event. This lesson covers practical patterns, syntax, and mistakes to avoid.

Emitting Events

Children speak to parents by emitting events. Parents listen with @event.

defineEmits documents the event API.

<script setup>
const emit = defineEmits<{ save: [id: string] }>()
function onClick() { emit('save', '42') }
</script>
<template>
  <button @click="onClick">Save</button>
</template>

Typed emits in script setup.

Native Listeners

Fallthrough attrs can attach to root elements automatically.

Prefer Vue 3 + Composition API.
Use script setup for SFCs.
Keep components focused.
Lean on official docs.

Vue Events Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
defineEmits	declare	API
@click.native	old vue2	Avoid
.prevent	modifier	Forms
.once	modifier	Fire once
v-on object	multi	Bind
kebab	listen	Templates

Name Events as Actions

save, close, not onSave in emit names.

Common Mistakes

Emitting without declaring.
Prop mutation instead of events.

Key Takeaways

Vue Events is a core Vue skill.
Practice in a Vite app.
Prefer clarity.
Revisit docs for edge cases.

Pro Tip

Validate payloads with types so parents know the contract.