Component events (createEventDispatcher) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the event dispatcher from Svelte.

Svelte

import { [1] } from 'svelte';

Drag options to blanks, or click blank then click option'

AonMount

BcreateEventDispatcher

CafterUpdate

Dtick

Attempts:

3 left

💡 Hint

Common Mistakes

Importing lifecycle functions like onMount instead of createEventDispatcher.

Forgetting to import anything.

The createEventDispatcher function is imported from Svelte to create custom events.

2fill in blank

medium

Complete the code to create the dispatcher inside the component.

Svelte

const [1] = createEventDispatcher();

Drag options to blanks, or click blank then click option'

AsendEvent

BdispatchEvent

Cdispatch

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using names like emit or sendEvent which are not standard in Svelte.

Using dispatchEvent which is a DOM method, not the dispatcher variable.

The variable dispatch is commonly used to hold the dispatcher returned by createEventDispatcher().

3fill in blank

hard

Fix the error in the code to dispatch a 'save' event with data.

Svelte

dispatch('[1]', { id: 1, name: 'Test' });

Drag options to blanks, or click blank then click option'

Asave

Bsubmit

ConSave

DsaveEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using event names with prefixes like 'on' which are used in handlers, not dispatching.

Using unrelated event names.

The event name should be a simple string like 'save' to identify the event.

4fill in blank

hard

Fill both blanks to dispatch a 'change' event with a value and listen to it in the parent.

Svelte

<ChildComponent on:[1]={ [2] } />

Drag options to blanks, or click blank then click option'

Achange

BhandleChange

Cclick

DonChange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onChange' as event name in Svelte, which is incorrect syntax.

Using unrelated event names like 'click'.

The child dispatches a 'change' event, and the parent listens with on:change calling handleChange.

5fill in blank

hard

Fill all three blanks to create a dispatcher, dispatch a 'submit' event with form data, and listen in the parent.

Svelte

<script>
  const [1] = createEventDispatcher();
  function submitForm() {
    [1]('[2]', { user: 'Alice' });
  }
</script>

<!-- Parent usage: <ChildComponent on:[2]={handleSubmit} /> -->

Drag options to blanks, or click blank then click option'

Adispatch

Bsubmit

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for dispatcher and calling it inconsistently.

Using wrong event names or handler names.

Use dispatch to create the dispatcher, dispatch the 'submit' event, and listen with on:submit in the parent.