How does a child component communicate back to its parent?

Question

Accepted Answer

A child communicates *up* to its parent by **emitting events**. The parent listens for them with `@event-name`. This completes Vue's one-way data flow: **props down, events up**. ## Emitting from the child ```vue ``` ## Listening in the parent ```vue ``` The child can't (and shouldn't) modify the parent's data directly. Instead it *asks* the parent to act by emitting an event with a payload; the parent owns the data and makes the change. ## Why declare emits with defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Declaring emitted events documents the component's "outputs," enables type-checking of payloads, and prevents the event from accidentally being treated as a native DOM listener. ## Other communication patterns ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## Why it matters Emitting events is the standard, predictable way for children to affect parent state — preserving one-way data flow (which makes apps easier to reason about and debug). Knowing `defineEmits` + `@listener`, and when to graduate to `provide/inject` or Pinia for non-parent-child communication, covers Vue's component communication model.