Component events (createEventDispatcher) in Svelte - Step-by-Step Execution

Concept Flow - Component events (createEventDispatcher)

Component A creates dispatcher

↓

Component A dispatches event

↓

Parent listens to event

↓

Parent handles event

↓

Parent updates state or reacts

Component A creates an event dispatcher, sends an event, and the parent listens and reacts to it.

Execution Sample

Svelte

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sendMessage() {
  dispatch('message', { text: 'Hello from child' });
}

This code creates an event dispatcher and sends a 'message' event with data when sendMessage is called.

Execution Table

Step	Action	Dispatcher State	Event Dispatched	Parent Listener	Parent Reaction
1	Component initializes	Dispatcher created	None	No event yet	No reaction
2	sendMessage() called	Dispatcher ready	message event with {text: 'Hello from child'}	Receives 'message' event	Updates message display
3	No further events	Dispatcher ready	None	No event	No change

💡 No more events dispatched, parent stops reacting.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
dispatch	undefined	function created	function ready	function ready
eventData	undefined	undefined	{ text: 'Hello from child' }	{ text: 'Hello from child' }
parentMessage	''	''	'Hello from child'	'Hello from child'

Key Moments - 2 Insights

Why doesn't the parent react before the event is dispatched?

Because the parent listens for events dispatched by the child. Until dispatch('message') runs (see execution_table step 2), no event is sent, so no reaction happens.

What happens if dispatch is called with a different event name?

The parent only reacts if it listens for that specific event name. If the event name differs, the parent's listener won't catch it (see execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'parentMessage' after step 2?

A "" (empty string)

B "Hello from child"

C undefined

D null

💡 Hint

Check variable_tracker row for 'parentMessage' after Step 2.

At which step does the parent receive the event?

A Step 1

B Step 3

C Step 2

D No step

💡 Hint

Look at execution_table column 'Parent Listener' to see when event is received.

If the child dispatches an event named 'update' instead of 'message', what happens to the parent's reaction?

A Parent does not react unless listening for 'update'

B Parent reacts the same way

C Parent throws an error

D Parent reacts twice

💡 Hint

Refer to key_moments about event names and parent listeners.

Concept Snapshot

Use createEventDispatcher() in a Svelte child component to send events.
Call dispatch('eventName', data) to notify the parent.
Parent listens with on:eventName to react.
Events allow child-to-parent communication.
Event names must match for parent to catch them.

Full Transcript

In Svelte, components can send events to their parents using createEventDispatcher. First, the child component creates a dispatcher function. When an action happens, the child calls dispatch with an event name and optional data. The parent listens for this event by adding on:eventName to the child component tag. When the event fires, the parent runs its handler and can update its state or UI. This flow allows child components to communicate upwards without direct references. The event name must match between dispatch and the parent's listener. This example shows a child sending a 'message' event with text data, and the parent updating its display when it receives it.