0Pricing
Sveltejs Academy · Lektion

Snippets als Props übergeben

Akzeptieren Sie Snippet-Werte als Props, um besonders flexible Component-APIs zu erstellen.

Snippets als Props übergeben ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.

Snippet als Prop

Snippets können wie jeder andere Wert an untergeordnete Komponenten übergeben werden.

Definieren und übergeben

Definieren Sie ein Snippet inline in der übergeordneten Komponente und verweisen Sie über seinen Namen darauf.

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

In der untergeordneten Komponente empfangen

Deklarieren Sie das Snippet als typisierte Prop.

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

Render-Props-Muster

Dieses Muster verallgemeinert die Render-Props aus React. Übergeordnete Komponenten steuern, wie untergeordnete Komponenten rendern.

Anpassung

Verschiedene übergeordnete Komponenten können unterschiedliche Snippets bereitstellen und das Layout vollständig anpassen.

Typisierte Snippet-Props

Typisieren Sie mit TypeScript den Snippet-Parameter, damit untergeordnete Komponenten Autovervollständigung erhalten.

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

Optionale Snippets

Snippet-Props können optional sein; rendern Sie sie nur, wenn sie übergeben wurden.

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

Children-Snippet

Das Standard-Snippet wird in $props() als children bereitgestellt.

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

Kompositionsmöglichkeiten

Snippet-Props bilden die Grundlage für Headless- und komponierbare UI-Bibliotheken.

TypeScript-Import

Importieren Sie den Typ Snippet aus svelte, um eine korrekte Typisierung zu erhalten.

import type { Snippet } from "svelte";

Vergleich mit Slots

Snippet-Props sind flexibler als Slots: Sie akzeptieren Parameter und können bedingt gerendert werden.

Kurztest

Wie empfangen Sie ein Snippet als Prop?

Zusammenfassung

Übergeben Sie Snippets als Props, um die Kontrolle umzukehren: Übergeordnete Komponenten stellen die Rendering-Logik bereit, untergeordnete Komponenten rufen sie über @render auf.

Häufig gestellte Fragen

Ist die Lektion „Snippets als Props übergeben“ kostenlos?

Ja — der vollständige Text von „Snippets als Props übergeben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Snippets als Props übergeben“?

Akzeptieren Sie Snippet-Werte als Props, um besonders flexible Component-APIs zu erstellen. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Sveltejs Academy zu starten?

Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Snippets als Props übergeben“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?

Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. $props() für typisierte Props
  2. {#snippet} und {@render}
  3. Snippets als Props übergeben
  4. Standard- und benannte Snippets
← Zurück zu Sveltejs Academy