javascript / expert
Snippet
Entkopplung der UI-Logik mit Snippets
Snippets ermöglichen ein 'Headless'-Komponenten-Pattern, bei dem die Elternkomponente die strukturelle Logik (wie Iteration) übernimmt, während der Konsument das spezifische Markup für jedes Element über einen wiederverwendbaren Template-Block bereitstellt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script>let { items, renderItem } = $props();</script><ul>{#each items as item}<li>{@render renderItem(item)}</li>{/each}</ul>
svelte
Erklärung
1
let { items, renderItem } = $props()
Empfängt ein Snippet namens renderItem als Prop von der Elternkomponente.
2
{@render renderItem(item)}
Führt das übergebene Snippet aus und injiziert die lokalen Elementdaten in das Template.