Sveltejs Academy · Lektion

Skicka snippets som props

Ta emot snippet-värden som props för att bygga mycket flexibla komponent-API:er.

Lektion 3 av 413 steg

Skicka snippets som props är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 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.

Snippet som prop

Snippets kan skickas till underordnade komponenter precis som alla andra värden.

Definiera och skicka

Definiera en snippet direkt i den överordnade komponenten och referera till den med namnet.

{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />

Ta emot i underkomponenten

Deklarera snippet-en som en typad prop.

let { itemSnippet, items } = $props();
{#each items as thing}
  {@render itemSnippet(thing)}
{/each}

Render props-mönstret

Detta generaliserar Reacts render prop-mönster. Överordnade komponenter styr hur underordnade komponenter renderas.

Anpassning

Olika överordnade komponenter kan tillhandahålla olika snippets och därmed helt anpassa layouten.

Typade snippet-props

Med TypeScript anger Ni typen för snippet-parametern så att underordnade komponenter får autokomplettering.

let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();

Valfria snippets

Snippet-props kan vara valfria; rendera dem endast när de har tillhandahållits.

{#if itemSnippet}
  {@render itemSnippet(thing)}
{/if}

children-snippet

Standard-snippet-en exponeras som children i $props().

let { children } = $props();
{@render children()}

Kompositionskraft

Snippet-props är grunden för headless- och komponerbara UI-bibliotek.

TypeScript-import

Importera typen Snippet från svelte för korrekt typning.

import type { Snippet } from "svelte";

Jämfört med slots

Snippet-props är mer flexibla än slots: de tar emot parametrar och kan renderas villkorligt.

Snabbtest

Hur tar Ni emot en snippet som prop?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Skicka snippets som props för att vända på kontrollen: överordnade komponenter tillhandahåller renderingslogiken och underordnade komponenter anropar den via @render.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skicka snippets som props” gratis?

Ja – hela texten till ”Skicka snippets som props” 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 snippets som props”?

Ta emot snippet-värden som props för att bygga mycket flexibla komponent-API:er. 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 3 av 4.

Hur lång tid tar lektionen ”Skicka snippets som props”?

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

← Tillbaka till Sveltejs Academy