javascript / intermediate
Snippet
Scoped Data Passing with Slot Props
Slot props (let:item) allow a child component to pass data back up to the parent that is providing the slot content. This is a powerful pattern for creating reusable layout components (like lists or tables) that don't care about the specific structure of the data they display.
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
Breakdown
1
<slot {item} />
Passes the 'item' variable to the slot provided by the parent.
2
let:item
Receives the scoped variable from the child component, making it available within the slot content.