javascript / intermediate
Snippet
Gekapselte Datenweitergabe mit Slot Props
Slot Props (let:item) ermöglichen es einer Kind-Komponente, Daten an das Elternteil zurückzugeben, das den Slot-Inhalt bereitstellt. Dies ist ein leistungsstarkes Muster zur Erstellung wiederverwendbarer Layout-Komponenten (wie Listen oder Tabellen), denen die spezifische Struktur der angezeigten Daten egal ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<!-- Component.svelte --><ul>{#each items as item}<slot {item} />{/each}</ul><!-- Consumer.svelte --><Component {items} let:item><li>Custom rendering for {item.name}</li></Component>
svelte
Erklärung
1
<slot {item} />
Übergibt die Variable 'item' an den vom Elternteil bereitgestellten Slot.
2
let:item
Empfängt die gekapselte Variable von der Kind-Komponente und macht sie innerhalb des Slot-Inhalts verfügbar.