Send props fra den overordnede komponent
Angiv værdier til underordnede komponenters props i den overordnede komponents template
Send props fra den overordnede komponent er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Importér barnet
Brug et standard-ES-import øverst i forælderkomponenten for at hente barnets komponent ind.
<script>
import Greeting from "./Greeting.svelte";
</script>Brug tagget
Gengiv barnet ved at skrive et tag med dets navn begyndende med stort bogstav.
<Greeting />Send statiske værdier
Send en bogstavelig streng med attributter i anførselstegn.
<Greeting name="Ada" />Send dynamiske værdier
Send et JS-udtryk ved at omslutte værdien med krøllede parenteser.
<Greeting name={userName} />Kortform med samme navn
Hvis proppen og variablen har samme navn, skal du bruge kortformen {name}.
<Greeting {name} />Flere props
Kombinér statiske, dynamiske props og props i kortform i vilkårlig rækkefølge.
<Card title="Tasks" {items} count={items.length} />Spredning af props
Spred et objekt med props ved hjælp af syntaksen {...obj}.
<Card {...cardProps} />Betingede props
Kombinér ternære udtryk for at angive betingede værdier.
<Button label={isLoading ? "Saving..." : "Save"} />Boolesk kortform
Send en boolesk attribut uden en værdi for at sætte den til true.
<Toggle disabled />Funktioner som props
Du kan sende funktionsreferencer som props til callbacks.
<Modal onClose={() => (open = false)} />Objekter som props
Send hele objekter, når mange relaterede værdier skal transporteres sammen.
<UserCard user={currentUser} />Hurtigt tjek
Hvordan sender du en variabel som en prop?
Opsummering
Importér komponenten, brug tagget, og send props med bogstavelige værdier, udtryk, kortform eller spredning.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Send props fra den overordnede komponent” gratis?
Ja — hele teksten til “Send props fra den overordnede komponent” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Send props fra den overordnede komponent”?
Angiv værdier til underordnede komponenters props i den overordnede komponents template Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Send props fra den overordnede komponent”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Deklarér props med export let
- Send props fra den overordnede komponent
- Standardværdier for props
- Videresend props med $$props og $$restProps