Przekazywanie propsów za pomocą $$props i $$restProps
Przekazuj wszystkie propsy lub pozostałe propsy do elementu albo komponentu wewnętrznego.
Przekazywanie propsów za pomocą $$props i $$restProps to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 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 przekazywać dalej propsy
Komponenty opakowujące często muszą przekazywać wszystkie otrzymane propsy do elementu wewnętrznego. Przekazywanie dalej pozwala uniknąć wymieniania każdego atrybutu.
Obiekt $$props
Wewnątrz komponentu $$props jest obiektem zawierającym każdy props przekazany do komponentu.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />Uwzględnianie nieznanych propsów
Nawet propsy, których komponent nie zadeklarował za pomocą export let, są obecne w $$props.
Obiekt $$restProps
$$restProps nie zawiera propsów jawnie zadeklarowanych za pomocą export let. Jest przydatny do przekazywania tylko dodatkowych propsów.
<script>
export let label;
</script>
<input {...$$restProps} />Typowy wzorzec
Zadeklaruj interesujące Cię propsy, a pozostałe przekaż dalej do opakowanego elementu.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />Pułapka: kolejność ma znaczenie
Najpierw użyj operatora spread, a następnie w razie potrzeby nadpisz konkretne atrybuty.
<input {...$$restProps} type="email" />Przekazywanie class
Przekazuj dalej atrybut class za pośrednictwem $$restProps, aby zachować elastyczność stylowania.
Przekazywanie stylów
Atrybut style oraz wszystkie atrybuty data-* również przechodzą dalej automatycznie.
Obsługa zdarzeń
Nasłuchiwacze zdarzeń przekazane przez komponent nadrzędny znajdują się w $$props jako funkcje. Operator spread również przekaże je dalej.
Ograniczenia reaktywności
$$props i $$restProps są nieco mniej wydajne niż zadeklarowane propsy, ponieważ Svelte nie może śledzić ich statycznie.
Uwaga dotycząca TypeScript
Oba obiekty są domyślnie słabo typowane. W TypeScript rzutuj je lub rozszerz ich typy, aby zapewnić bezpieczne typowanie podczas przekazywania.
Szybkie sprawdzenie
Czym jest $$restProps?
Podsumowanie
Przekazuj propsy dalej za pomocą $$props (wszystkie) lub $$restProps (tylko dodatkowe), używając operatora spread na elemencie wewnętrznym.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Przekazywanie propsów za pomocą $$props i $$restProps” jest bezpłatna?
Tak — pełny tekst „Przekazywanie propsów za pomocą $$props i $$restProps” 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 propsów za pomocą $$props i $$restProps”?
Przekazuj wszystkie propsy lub pozostałe propsy do elementu albo komponentu wewnętrznego. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Przekazywanie propsów za pomocą $$props i $$restProps”?
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
- Deklarowanie propsów za pomocą export let
- Przekazywanie propsów z komponentu nadrzędnego
- Domyślne wartości propsów
- Przekazywanie propsów za pomocą $$props i $$restProps