Eventi personalizzati con createEventDispatcher
Emetta eventi personalizzati tipizzati dai componenti figli affinché li gestisca il genitore.
Eventi personalizzati con createEventDispatcher è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Perché usare gli eventi personalizzati
I componenti figli comunicano verso l'alto inviando eventi personalizzati che il componente padre ascolta.
Importare il dispatcher
Importi createEventDispatcher da svelte e ne crei uno all'interno dello script.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Inviare un evento
Chiami dispatch(name, detail) per emettere l'evento. I componenti padre ascoltano con on:name.
function save() { dispatch("save", { id: 42 }); }Ascoltare nel componente padre
Tratti gli eventi personalizzati come gli eventi del DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Dettagli dell'evento
Il secondo argomento diventa event.detail dal lato del componente che riceve l'evento.
Nessuna propagazione predefinita
Gli eventi personalizzati non si propagano automaticamente attraverso l'albero dei componenti Svelte. Se necessario, li inoltri esplicitamente.
Eventi tipizzati
Con TypeScript è possibile tipizzare gli eventi per ottenere il completamento automatico nei componenti padre.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Eventi annullabili
Passi { cancelable: true } come terzo argomento per consentire ai componenti padre di chiamare preventDefault.
Più eventi
Un dispatcher può emettere molti tipi di evento; usi nomi univoci per ogni intenzione.
Eviti i nomi generici
Preferisca nomi specifici come itemSelected al nome generico change.
Evento o callback
Gli eventi sono adatti per segnalare informazioni verso l'alto; per un'integrazione stretta, consideri di passare props callback.
Verifica rapida
Come legge il componente padre i dati dell'evento?
Riepilogo
Usi createEventDispatcher per emettere eventi con nome e un payload detail, quindi li ascolti con on:eventName.
Domande Frequenti
La lezione «Eventi personalizzati con createEventDispatcher» è gratuita?
Sì — il testo completo di «Eventi personalizzati con createEventDispatcher» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Eventi personalizzati con createEventDispatcher»?
Emetta eventi personalizzati tipizzati dai componenti figli affinché li gestisca il genitore. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Eventi personalizzati con createEventDispatcher»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- on:click on:input on:submit
- Modificatori degli eventi: preventDefault stopPropagation once
- Eventi personalizzati con createEventDispatcher
- Inoltro degli eventi con on:click