javascript / beginner
Snippet
Passing Data to Parent Components via Event Dispatchers
The `createEventDispatcher` function creates an event dispatcher that allows a child component to emit custom events with payload data up to its parent.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function notifyParent() {dispatch('messageSent', { text: 'Hello from child!' });}</script><button on:click={notifyParent}>Send Message</button>
svelte
Breakdown
1
const dispatch = createEventDispatcher();
Instantiates the component event dispatcher.
2
dispatch('messageSent', { text: 'Hello from child!' });
Triggers a custom 'messageSent' event containing a payload object.
3
<button on:click={notifyParent}>Send Message</button>
Attaches a click handler function to trigger the dispatch logic.