clarify let: directives

pull/8495/head
James Scott-Brown 3 years ago committed by GitHub
parent 9425f18e52
commit 3e866573e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1600,22 +1600,26 @@ Note that explicitly passing in an empty named slot will add that slot's name to
--- ---
Slots can be rendered zero or more times and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive. Slots can be rendered zero or more times.
The `let:` directive gives a slot template access to variables defined in the component that uses them.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`. The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
```sv ```sv
<!-- FancyList.svelte --> <!-- FancyList.svelte -->
<!-- This component passes data to its child slot using the `itemData` prop -->
<ul> <ul>
{#each items as item} {#each items as item}
<li class="fancy"> <li class="fancy">
<slot prop={item}></slot> <slot itemData={item}></slot>
</li> </li>
{/each} {/each}
</ul> </ul>
<!-- App.svelte --> <!-- App.svelte -->
<FancyList {items} let:prop={thing}> <!-- the `let:itemData={thing}` directive makes the value that `FancyList` pases as the `itemData` prop
available to the slot template as the `thing` variable -->
<FancyList {items} let:itemData={thing}>
<div>{thing.text}</div> <div>{thing.text}</div>
</FancyList> </FancyList>
``` ```

Loading…
Cancel
Save