Standard- og navngivne snippets
Angiv fallback-snippets, og giv flere snippet-pladser navne i en komponent.
Standard- og navngivne snippets er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 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.
Standard-snippet
Indhold, der placeres mellem en komponents tags, bliver standard-snippet'et og er tilgængeligt via children.
<Card>
<p>Inside the card</p>
</Card>I komponenten
Gengiv standardindholdet med children-proppen.
let { children } = $props();
<div class="card">
{@render children()}
</div>Navngivne snippets
Send flere snippets efter navn som props.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>Modtag navngivne snippets
Erklær hvert navngivet snippet som en prop.
let { header, body } = $props();
{@render header()}
{@render body()}Reserveindhold
Angiv standardindhold som reserve ved hjælp af almindelige betingelser.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}Typesikkerhed
Angiv typen for hver snippet-parameter eksplicit for at få IDE-understøttelse.
Erstatning af navngivne slots
Snippets erstatter mønsteret med navngivne slots fra Svelte 4 og giver flere muligheder.
Standardindhold
Snippets har ikke indbygget reserveindhold; brug {#if} til det.
Sammensætningsmønstre
Kombinér standard-snippets og navngivne snippets for headless-komponentdesigns.
Migreringstip
Under migreringen skal du konvertere hvert navngivne slot til en navngiven snippet-prop.
TypeScript-inferens
Svelte 5 genererer automatisk Snippet-typer ud fra din komponents props.
Hurtigt tjek
Hvad erstatter navngivne slots i Svelte 5?
Opsummering
Standardindhold bruger children-snippet'et; navngivne snippets er eksplicitte props, der gengives med @render.
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 “Standard- og navngivne snippets” gratis?
Ja — hele teksten til “Standard- og navngivne snippets” 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 “Standard- og navngivne snippets”?
Angiv fallback-snippets, og giv flere snippet-pladser navne i en komponent. 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 4 af 4.
Hvor lang tid tager lektionen “Standard- og navngivne snippets”?
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
- $props() til typede props
- {#snippet} og {@render}
- Videregivelse af snippets som props
- Standard- og navngivne snippets