javascript / beginner
Snippet
Verwendung von Slots für Content-Projektion
Slots ermöglichen es Komponenten, beliebigen HTML-Inhalt von ihren Eltern-Komponenten zu akzeptieren. Dies macht Komponenten als Layout-Wrapper oder Container sehr wiederverwendbar.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Card.svelte --><div class="card"><slot>Default content if nothing is provided</slot></div><!-- App.svelte --><Card><h3>Custom Title</h3><p>This goes into the slot.</p></Card>
svelte
Erklärung
1
<slot>
Definiert den Platzhalter, an dem die Kinder der Elternkomponente gerendert werden.
2
Default content...
Text innerhalb des Slot-Tags dient als Fallback-Inhalt.