Skicka props från den överordnade komponenten
Tilldela värden till underordnade komponenters props i den överordnade komponentens mall.
Skicka props från den överordnade komponenten är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Importera barnet
Använd en vanlig ES-import högst upp i föräldrakomponenten för att importera barnkomponenten.
<script>
import Greeting from "./Greeting.svelte";
</script>Använd taggen
Rendera barnet genom att skriva en tagg med dess namn och inledande versal.
<Greeting />Skicka statiska värden
Skicka en bokstavlig sträng med attribut inom citattecken.
<Greeting name="Ada" />Skicka dynamiska värden
Skicka ett JS-uttryck genom att omge värdet med klammerparenteser.
<Greeting name={userName} />Förkortning med samma namn
Om propen och variabeln har samma namn kan ni använda förkortningen {name}.
<Greeting {name} />Flera props
Kombinera statiska, dynamiska och förkortade props i valfri ordning.
<Card title="Tasks" {items} count={items.length} />Spread för props
Sprid ett props-objekt med syntaxen {...obj}.
<Card {...cardProps} />Villkorliga props
Kombinera ternära uttryck för att ange villkorliga värden.
<Button label={isLoading ? "Saving..." : "Save"} />Boolesk förkortning
Skicka ett booleskt attribut utan värde för att ange värdet true.
<Toggle disabled />Funktioner som props
Ni kan skicka funktionsreferenser som props för callback-funktioner.
<Modal onClose={() => (open = false)} />Objekt som props
Skicka hela objekt när många relaterade värden hör ihop.
<UserCard user={currentUser} />Snabbtest
Hur skickar ni en variabel som en prop?
Sammanfattning
Importera komponenten, använd taggen och skicka props med litteraler, uttryck, förkortningar eller spread.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Skicka props från den överordnade komponenten” gratis?
Ja – hela texten till ”Skicka props från den överordnade komponenten” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skicka props från den överordnade komponenten”?
Tilldela värden till underordnade komponenters props i den överordnade komponentens mall. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skicka props från den överordnade komponenten”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Deklarera props med export let
- Skicka props från den överordnade komponenten
- Standardvärden för props
- Vidarebefordra props med $$props och $$restProps