Benutzerdefinierte Ereignisse mit createEventDispatcher
Lösen Sie typisierte benutzerdefinierte Ereignisse aus untergeordneten Komponenten aus, die übergeordnete Komponenten verarbeiten können.
Benutzerdefinierte Ereignisse mit createEventDispatcher ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum benutzerdefinierte Ereignisse
Untergeordnete Komponenten kommunizieren nach oben, indem sie benutzerdefinierte Ereignisse auslösen, auf die die übergeordnete Komponente hört.
Dispatcher importieren
Importieren Sie createEventDispatcher aus svelte und erstellen Sie einen Dispatcher in Ihrem Skript.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Ein Ereignis auslösen
Rufen Sie dispatch(name, detail) auf, um ein Ereignis auszulösen. Übergeordnete Komponenten hören mit on:name darauf.
function save() { dispatch("save", { id: 42 }); }In der übergeordneten Komponente lauschen
Behandeln Sie benutzerdefinierte Ereignisse wie DOM-Ereignisse.
<Child on:save={(e) => console.log(e.detail.id)} />Ereignisdetails
Das zweite Argument wird auf der Seite des Empfängers zu event.detail.
Standardmäßig kein Bubbling
Benutzerdefinierte Ereignisse werden nicht automatisch durch Svelte-Komponentenbäume weitergereicht. Leiten Sie sie bei Bedarf explizit weiter.
Typisierte Ereignisse
Mit TypeScript können Sie die Ereignisse typisieren, damit übergeordnete Komponenten Autovervollständigung erhalten.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Abbrechbare Ereignisse
Übergeben Sie { cancelable: true } als drittes Argument, damit übergeordnete Komponenten preventDefault aufrufen können.
Mehrere Ereignisse
Ein Dispatcher kann viele Ereignistypen auslösen. Verwenden Sie für jede Absicht eindeutige Namen.
Generische Namen vermeiden
Bevorzugen Sie spezifische Namen wie itemSelected statt des generischen Namens change.
Ereignis oder Callback
Ereignisse eignen sich gut für Signale nach oben. Für eine enge Integration sollten Sie stattdessen Callback-Props übergeben.
Schnelltest
Wie liest eine übergeordnete Komponente Ereignisdaten aus?
Zusammenfassung
Verwenden Sie createEventDispatcher, um benannte Ereignisse mit einer Detail-Nutzlast auszulösen, und lauschen Sie mit on:eventName darauf.
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Ereignisse mit createEventDispatcher“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Ereignisse mit createEventDispatcher“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Benutzerdefinierte Ereignisse mit createEventDispatcher“?
Lösen Sie typisierte benutzerdefinierte Ereignisse aus untergeordneten Komponenten aus, die übergeordnete Komponenten verarbeiten können. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Benutzerdefinierte Ereignisse mit createEventDispatcher“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- on:click on:input on:submit
- Ereignismodifikatoren: preventDefault stopPropagation once
- Benutzerdefinierte Ereignisse mit createEventDispatcher
- Ereignisse mit on:click weiterleiten