Niestandardowe zdarzenia z createEventDispatcher
Emituj typowane niestandardowe zdarzenia z komponentów podrzędnych, aby komponent nadrzędny mógł je obsłużyć.
Niestandardowe zdarzenia z createEventDispatcher to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dlaczego zdarzenia niestandardowe
Komponenty podrzędne komunikują się w górę, wysyłając zdarzenia niestandardowe, których nasłuchuje komponent nadrzędny.
Importowanie dyspozytora
Należy zaimportować createEventDispatcher z svelte i utworzyć dyspozytora wewnątrz skryptu.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Wysyłanie zdarzenia
Wywołaj dispatch(name, detail), aby wysłać zdarzenie. Komponenty nadrzędne nasłuchują go za pomocą on:name.
function save() { dispatch("save", { id: 42 }); }Nasłuchiwanie w komponencie nadrzędnym
Zdarzenia niestandardowe obsługuje się tak samo jak zdarzenia DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Szczegóły zdarzenia
Drugi argument staje się właściwością event.detail po stronie odbiorcy.
Brak propagacji domyślnie
Zdarzenia niestandardowe nie propagują się automatycznie w drzewie komponentów Svelte. W razie potrzeby należy przekazać je jawnie.
Typowane zdarzenia
W TypeScript można określić typy zdarzeń, aby uzyskać autouzupełnianie w komponentach nadrzędnych.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Zdarzenia anulowalne
Przekaż { cancelable: true } jako trzeci argument, aby umożliwić komponentom nadrzędnym wywołanie preventDefault.
Wiele zdarzeń
Jeden dyspozytor może wysyłać wiele typów zdarzeń; dla każdej intencji używaj unikalnych nazw.
Unikanie ogólnych nazw
Wybieraj konkretne nazwy, takie jak itemSelected, zamiast ogólnych, takich jak change.
Zdarzenie a funkcja zwrotna
Zdarzenia dobrze sprawdzają się do przekazywania sygnałów w górę; w przypadku ścisłej integracji warto rozważyć przekazywanie właściwości zawierających funkcje zwrotne.
Szybkie sprawdzenie
Jak komponent nadrzędny odczytuje dane zdarzenia?
Podsumowanie
Użyj createEventDispatcher, aby wysyłać nazwane zdarzenia z ładunkiem szczegółów, a nasłuchuj ich za pomocą on:eventName.
Często zadawane pytania
Czy lekcja „Niestandardowe zdarzenia z createEventDispatcher” jest bezpłatna?
Tak — pełny tekst „Niestandardowe zdarzenia z createEventDispatcher” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Niestandardowe zdarzenia z createEventDispatcher”?
Emituj typowane niestandardowe zdarzenia z komponentów podrzędnych, aby komponent nadrzędny mógł je obsłużyć. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Niestandardowe zdarzenia z createEventDispatcher”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- on:click on:input on:submit
- Modyfikatory zdarzeń: preventDefault stopPropagation once
- Niestandardowe zdarzenia z createEventDispatcher
- Przekazywanie zdarzeń za pomocą on:click