javascript / beginner
Snippet
Auslösen benutzerdefinierter Ereignisse mit Payload-Mustern in Svelte
Svelte nutzt das Event-Dispatcher-Muster zur Kommunikation von untergeordneten Kindkomponenten an übergeordnete Elternkomponenten. Der Aufruf von `createEventDispatcher()` erzeugt eine Dispatcher-Funktion, die benannte Events mit strukturierten JavaScript-Payload-Objekten sendet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function emitItemSave() {const payload = { id: 101, timestamp: Date.now() };dispatch('itemSaved', payload);}</script><button on:click={emitItemSave}>Save Record</button>
svelte
Erklärung
1
import { createEventDispatcher } from 'svelte';
Importiert die Hilfsfunktion aus der Svelte-Kernbibliothek, um benutzerdefinierte Komponenten-Events zu ermöglichen.
2
const dispatch = createEventDispatcher();
Instanziiert eine Event-Dispatcher-Funktion für die aktuelle Komponenteninstanz.
3
const payload = { id: 101, timestamp: Date.now() };
Erstellt ein JavaScript-Datenobjekt mit relevanten Details zur Weitergabe an übergeordnete Komponenten.
4
dispatch('itemSaved', payload);
Löst das benutzerdefinierte Event 'itemSaved' aus und übergibt das Payload-Objekt an die detail-Eigenschaft.
5
<button on:click={emitItemSave}>
Verknüpft das Klick-Ereignis der Schaltfläche mit der ausführenden Emitter-Funktion.