javascript / expert
Snippet
Wiederverwendbare UI-Logik mit Svelte 5 Snippets
Snippets ermöglichen es, wiederverwendbare Markup-Blöcke innerhalb einer Komponente zu definieren. Sie ersetzen den älteren Slot-Mechanismus durch einen flexibleren, funktionsähnlichen Ansatz, der Argumente akzeptieren und dynamisch gerendert werden kann.
snippet.js
1
2
3
4
5
6
7
8
9
10
{#snippet userCard(user)}<div class="card"><h3>{user.name}</h3>{@render children?.()}</div>{/snippet}{@render userCard({ name: 'Expert' })}<p>Extra content via children.</p>{/render}
svelte
Erklärung
1
{#snippet userCard(user)}
Definiert ein Snippet namens 'userCard', das 'user' als Parameter entgegennimmt.
2
{@render children?.()}
Rendert den verschachtelten Inhalt, der an das Snippet übergeben wurde, ähnlich wie Slots.
3
{@render userCard(...)}
Ruft das Snippet mit spezifischen Daten auf.