Dispatching Custom Events

Snippet

Dispatching Custom Events

Components can emit custom events to communicate with their parents using createEventDispatcher. This allows child components to send data or signals up the component tree.

snippet.js

javascript

import { createEventDispatcher } from 'svelte';
 
const dispatch = createEventDispatcher();
 
function notifyParent() {
  dispatch('message', {
    text: 'Hello from child!'
  });
}

svelte

Breakdown

const dispatch = createEventDispatcher();

Initializes the event dispatcher for this component.

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

Fires a custom event named 'message' with a data payload.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Dispatching Custom Events

Related