Sveltejs Academy · leksjon

Standardiserte og navngitte snippets

Angi fallback-snippets og gi navn til flere snippet-plasser i en component.

Leksjon 4 av 413 trinn

Standardiserte og navngitte snippets er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Standard-snippet

Innhold som plasseres mellom en komponents tagger, blir standard-snippeten og er tilgjengelig via children.

<Card>
  <p>Inside the card</p>
</Card>

I komponenten

Rendere standardinnholdet med children-propen.

let { children } = $props();
<div class="card">
  {@render children()}
</div>

Navngitte snippets

Send flere snippets som props med navn.

<Card>
  {#snippet header()}<h2>Title</h2>{/snippet}
  {#snippet body()}<p>Text</p>{/snippet}
</Card>

Motta navngitte snippets

Deklarer hvert navngitte snippet som en prop.

let { header, body } = $props();
{@render header()}
{@render body()}

Reserveinnhold

Bruk standard reserveinnhold med vanlige betingelser.

{#if header}{@render header()}{:else}<h2>Default</h2>{/if}

Typesikkerhet

Angi typen til hver snippet-parameter eksplisitt for IDE-støtte.

Erstatt navngitte slotter

Snippets erstatter mønsteret med navngitte slotter fra Svelte 4, og gir større fleksibilitet.

Standardinnhold

Snippets har ikke innebygd reserveinnhold; bruk {#if} til dette.

Komposisjonsmønstre

Kombiner standard- og navngitte snippets for headless-komponentdesign.

Migreringstips

Ved migrering konverterer du hver navngitte slot til en navngitt snippet-prop.

TypeScript-utledning

Svelte 5 genererer Snippet-typer automatisk fra komponentens props.

Kort kontroll

Hva erstatter navngitte slotter i Svelte 5?

Besvar den i den interaktive leksjonen

Oppsummering

Standardinnhold bruker children-snippeten; navngitte snippets er eksplisitte props som rendres med @render.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Standardiserte og navngitte snippets» gratis?

Ja – hele teksten i «Standardiserte og navngitte snippets» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Standardiserte og navngitte snippets»?

Angi fallback-snippets og gi navn til flere snippet-plasser i en component. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sveltejs Academy?

Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Standardiserte og navngitte snippets»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?

Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sveltejs Academy