Événements personnalisés avec createEventDispatcher
Émettez des événements personnalisés typés depuis les composants enfants pour que le parent les gère.
Événements personnalisés avec createEventDispatcher est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Pourquoi utiliser des événements personnalisés
Les composants enfants communiquent avec leurs parents en envoyant des événements personnalisés auxquels le parent est à l’écoute.
Importer le répartiteur
Importez createEventDispatcher depuis svelte, puis créez-en un dans votre script.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Envoyer un événement
Appelez dispatch(name, detail) pour émettre un événement. Les parents l’écoutent avec on:name.
function save() { dispatch("save", { id: 42 }); }Écouter dans le parent
Traitez les événements personnalisés comme des événements du DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Détails de l’événement
Le deuxième argument devient event.detail du côté du consommateur.
Pas de propagation par défaut
Les événements personnalisés ne se propagent pas automatiquement dans l’arborescence des composants Svelte. Transmettez-les explicitement si nécessaire.
Événements typés
Avec TypeScript, vous pouvez typer les événements afin de bénéficier de la complétion automatique dans les parents.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Événements annulables
Passez { cancelable: true } comme troisième argument pour permettre aux parents d’appeler preventDefault.
Plusieurs événements
Un seul répartiteur peut émettre de nombreux types d’événements : utilisez des noms uniques correspondant à chaque intention.
Éviter les noms génériques
Préférez des noms précis comme itemSelected au nom générique change.
Événement ou rappel
Les événements conviennent bien aux signaux envoyés vers le parent : pour une intégration étroite, envisagez de transmettre des propriétés de rappel.
Vérification rapide
Comment un parent lit-il les données d’un événement ?
Récapitulatif
Utilisez createEventDispatcher pour émettre des événements nommés avec une charge utile détaillée, puis écoutez-les avec on:eventName.
Questions Fréquemment Posées
La leçon « Événements personnalisés avec createEventDispatcher » est-elle gratuite ?
Oui — le texte complet de « Événements personnalisés avec createEventDispatcher » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Événements personnalisés avec createEventDispatcher » ?
Émettez des événements personnalisés typés depuis les composants enfants pour que le parent les gère. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Événements personnalisés avec createEventDispatcher » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- on:click on:input on:submit
- Modificateurs d’événements : preventDefault stopPropagation once
- Événements personnalisés avec createEventDispatcher
- Transmettre les événements avec on:click