Przekazywanie snippetów jako propsów
Przyjmuj wartości snippetów jako propsy, aby tworzyć bardzo elastyczne API komponentów.
Przekazywanie snippetów jako propsów 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.
Snippet jako props
Snippety można przekazywać do komponentów potomnych tak jak każdą inną wartość.
Definiowanie i przekazywanie
Zdefiniuj snippet bezpośrednio w rodzicu i odwołuj się do niego po nazwie.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />Odbieranie w komponencie potomnym
Zadeklaruj snippet jako typowany props.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}Wzorzec render props
Ten wzorzec uogólnia render props znany z Reacta. Rodzice kontrolują sposób renderowania dzieci.
Dostosowywanie
Różni rodzice mogą dostarczać różne snippety, w pełni dostosowując układ.
Typowane propsy snippetów
W TypeScript określ typ parametru snippetu, aby komponenty potomne otrzymywały podpowiedzi autouzupełniania.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();Opcjonalne snippety
Propsy będące snippetami mogą być opcjonalne; renderuj je tylko wtedy, gdy zostały przekazane.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}Snippet children
Domyślny snippet jest udostępniany jako children w $props().
let { children } = $props();
{@render children()}Siła kompozycji
Propsy będące snippetami stanowią podstawę bibliotek interfejsu użytkownika typu headless i bibliotek kompozycyjnych.
Import typu TypeScript
Zaimportuj typ Snippet z svelte, aby zapewnić prawidłowe typowanie.
import type { Snippet } from "svelte";W porównaniu ze slotami
Propsy będące snippetami są bardziej elastyczne niż sloty: przyjmują parametry i mogą być renderowane warunkowo.
Szybkie sprawdzenie
Jak odebrać snippet jako props?
Podsumowanie
Przekazuj snippety jako propsy, aby odwrócić sterowanie: rodzice dostarczają logikę renderowania, a dzieci wywołują ją za pomocą @render.
Często zadawane pytania
Czy lekcja „Przekazywanie snippetów jako propsów” jest bezpłatna?
Tak — pełny tekst „Przekazywanie snippetów jako propsów” 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 „Przekazywanie snippetów jako propsów”?
Przyjmuj wartości snippetów jako propsy, aby tworzyć bardzo elastyczne API komponentów. Ć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 „Przekazywanie snippetów jako propsów”?
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
- $props() dla typowanych propsów
- {#snippet} i {@render}
- Przekazywanie snippetów jako propsów
- Domyślne i nazwane snippety