Deklarowanie propsów za pomocą export let
Udostępniaj właściwości komponentu komponentom nadrzędnym za pomocą słowa kluczowego export.
Deklarowanie propsów za pomocą export let to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 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.
Props to eksporty
Aby zadeklarować props, należy napisać export let name w skrypcie komponentu. Słowo kluczowe export udostępnia go komponentom nadrzędnym.
<script>
export let name;
</script>
<p>Hello {name}!</p>Wiele propsów
Należy zadeklarować tyle propsów, ile potrzebuje komponent.
<script>
export let title;
export let count;
export let onClick;
</script>Typowane propsy
Dodaj typy za pomocą TypeScript, aby zwiększyć bezpieczeństwo i zapewnić wsparcie edytora.
<script lang="ts">
export let count: number;
export let label: string;
</script>Dlaczego export
Słowo kluczowe export w kontekście skryptu pochodzi z modułów ES, ale w Svelte oznacza „udostępnij komponentowi nadrzędnemu”.
Wymagane a opcjonalne
Propsy bez wartości domyślnej są wymagane. Należy podać wartość domyślną, aby uczynić je opcjonalnymi.
export let title = "Untitled";Konwencja tylko do odczytu
Propsy należy traktować jako dane wejściowe tylko do odczytu. Ich modyfikowanie jest technicznie dozwolone, ale zaburza jednokierunkowy przepływ danych.
Reaktywne propsy
Propsy są reaktywne: gdy komponent nadrzędny przekaże nową wartość, komponent zostanie automatycznie wyrenderowany ponownie.
Funkcje jako wartości domyślne
Wartościami domyślnymi mogą być funkcje lub wyrażenia obliczane.
export let onClick = () => {};Propsy logiczne
W przypadku propsów logicznych podanie atrybutu bez wartości oznacza true.
<MyComp disabled />Aliasowane propsy
Jeśli nazwa propsa jest słowem zarezerwowanym, takim jak class, można zmienić ją wewnętrznie.
let className;
export { className as class };Zmienione aliasy
Wzorzec aliasowania pozwala akceptować nazwy przyjazne HTML, zachowując identyfikatory zgodne z JavaScript wewnątrz komponentu.
Szybkie sprawdzenie
Jak zadeklarować props?
Podsumowanie
Propsy deklaruje się za pomocą export let, mogą mieć typy i wartości domyślne oraz są reaktywne, gdy komponent nadrzędny je aktualizuje.
Często zadawane pytania
Czy lekcja „Deklarowanie propsów za pomocą export let” jest bezpłatna?
Tak — pełny tekst „Deklarowanie propsów za pomocą export let” 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 „Deklarowanie propsów za pomocą export let”?
Udostępniaj właściwości komponentu komponentom nadrzędnym za pomocą słowa kluczowego export. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Deklarowanie propsów za pomocą export let”?
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