Communication via Component Event Dispatchers

Snippet

Communication via Component Event Dispatchers

Svelte's event dispatcher allows components to emit custom events to their parents. Unlike standard DOM events, these do not bubble automatically unless explicitly forwarded.

snippet.js
javascript
import { createEventDispatcher } from 'svelte';
 
const dispatch = createEventDispatcher();
 
function completeTask(id) {
  dispatch('complete', {
    taskId: id,
    timestamp: Date.now()
  });
}

svelte

Breakdown

const dispatch = createEventDispatcher();

Initialize the dispatcher; it must be called during component initialization.

dispatch('complete', { ... });

Emit a custom event named 'complete' with a detail object containing task data.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Communication via Component Event Dispatchers

Related