Component events (createEventDispatcher) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is createEventDispatcher used for in Svelte?

It is used to create a function that lets a child component send custom events to its parent component.

beginner

How do you import <code>createEventDispatcher</code> in a Svelte component?

You import it from 'svelte' like this: <br><code>import { createEventDispatcher } from 'svelte';</code>

intermediate

Explain the steps to dispatch a custom event from a child component.

1. Import <code>createEventDispatcher</code>.<br>2. Call it to get a <code>dispatch</code> function.<br>3. Use <code>dispatch('eventName', detail)</code> to send the event.<br>4. The parent listens for <code>on:eventName</code>.

beginner

What does the detail argument in dispatch('eventName', detail) represent?

It is an optional object or value that carries extra information about the event to the parent component.

beginner

How does a parent component listen to a custom event dispatched by a child?

The parent adds an event listener using on:eventName on the child component tag, like <Child on:eventName={handler} />.

What does createEventDispatcher return?

A An event listener

B A component instance

C A function to send custom events

D A DOM element

createEventDispatcher returns a function that you use to send custom events from a child to a parent component.

How do you send a custom event named 'save' with data from a child component?

A sendEvent('save', data)

B dispatchEvent('save', data)

C emit('save', data)

D dispatch('save', data)

The correct syntax is dispatch('save', data) after creating the dispatcher function.

Where do you import createEventDispatcher from?

A 'svelte/internal'

B 'svelte'

C 'svelte/store'

D 'svelte/events'

You import createEventDispatcher directly from the main 'svelte' package.

How does a parent component listen to a custom event 'update' from a child?

A <Child on:update={handler} />

B <Child listen:update={handler} />

C <Child event:update={handler} />

D <Child catch:update={handler} />

The parent uses on:update to listen to the child's custom event.

What happens if you dispatch an event without a listener in the parent?

A Nothing, the event is ignored

B An error is thrown

C The app crashes

D The event bubbles to the DOM

If no parent listens, the event is simply ignored without any error.

Describe how to create and use a custom event in Svelte using createEventDispatcher.

Think about how child and parent communicate with events.

Explain the role of the detail parameter when dispatching events in Svelte.

What extra information might the parent need?