javascript / intermediate
Snippet
Flexible Komposition mit Scoped Slots
Scoped Slots ermöglichen es einer Kind-Komponente, Daten über den Slot-Mechanismus zurück an das Elternteil zu geben. Mit der 'let:'-Direktive kann das Elternteil auf Variablen zugreifen, die im Kind definiert sind, was hochgradig wiederverwendbare Muster wie Datentabellen oder Listen ermöglicht.
snippet.js
javascript
1
2
3
4
5
6
7
<!-- Child.svelte --><slot {item} index={i}></slot><!-- Parent.svelte --><Child let:item let:index><p>{index}: {item.text}</p></Child>
svelte
Erklärung
1
<slot {item} index={i}></slot>
Exponiert die Variablen 'item' und 'index' für die Eltern-Komponente.
2
let:item let:index
Empfängt die Daten des Kindes und macht sie innerhalb des Templates des Elternteils verfügbar.