Events for child to parent communication in Vue - Step-by-Step Execution

Concept Flow - Events for child to parent communication

Child Component

↓

Parent Component

↓

Parent updates state or reacts

The child sends an event with data upward, and the parent listens and reacts to it.

Execution Sample

Vue

<template>
  <Child @notify="handleNotify" />
</template>
<script setup>
function handleNotify(message) {
  alert(message)
}
</script>

Parent listens to child's 'notify' event and shows an alert with the message.

Execution Table

Step	Action	Component	Event Emitted	Parent Listener	Parent Reaction
1	Child renders	Child	None	None	None
2	User clicks button in Child	Child	Emits 'notify' with 'Hello!'	Listens for 'notify'	Calls handleNotify('Hello!')
3	Parent handles event	Parent	None	Received 'notify'	Shows alert with 'Hello!'
4	Event cycle ends	Both	None	None	No further action

💡 Event emitted by child and handled by parent, communication complete.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
message	undefined	'Hello!'	'Hello!'	'Hello!'
parentState	initial	initial	updated if any	updated if any

Key Moments - 2 Insights

Why does the parent need to listen for the child's event?

Because the child emits an event, but the parent only reacts if it listens for that event, as shown in execution_table step 2 and 3.

Can the child directly change the parent's data?

No, the child cannot directly change parent's data; it must emit an event that the parent listens to and then updates its own data, as seen in the flow.

Visual Quiz - 3 Questions

Look at the execution table, what event does the child emit at step 2?

A 'update' with no data

B 'notify' with message 'Hello!'

C 'click' event

D No event emitted

💡 Hint

Check the 'Event Emitted' column at step 2 in the execution_table.

At which step does the parent call the handler function?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Parent Reaction' column in the execution_table.

If the parent does not listen for the child's event, what happens?

A Event is emitted but parent ignores it

B Child cannot emit events

C Parent still reacts automatically

D Child updates parent data directly

💡 Hint

Refer to the concept_flow and key_moments about event listening.

Concept Snapshot

Child emits event with data using $emit.
Parent listens with @eventName in template.
Parent handler receives data and updates state.
This enables child-to-parent communication.
Child cannot directly change parent data.
Events flow upward only.

Full Transcript

In Vue, child components communicate with parents by emitting events. The child uses $emit to send an event with optional data. The parent listens for this event using the @eventName syntax in its template. When the event occurs, the parent runs a handler function that can update its state or perform actions. This pattern keeps components decoupled and allows data to flow upward safely. The child cannot directly modify the parent's data; it must notify the parent through events. This example shows a child emitting a 'notify' event with a message, and the parent showing an alert when it receives it.