由于代码片段（和函数一样）只是值，它们可以作为 props 传递给组件。
以这个 <FilteredList> 组件为例。它的工作是过滤传入的 data，但它对如何渲染数据没有任何限制 — 这是父组件的责任。
我们已经定义了一些代码片段。首先，让我们把它们传入 <FilteredList>：
App
<FilteredList
data={colors}
field="name"
{header}
{row}
></FilteredList>然后，在另一端，将 header 和 row 声明为 props：
FilteredList
<script>
let { data, field, header, row } = $props();
// ...
</script><script lang="ts">
let { data, field, header, row } = $props();
// ...
</script>最后，用渲染标签替换占位内容：
FilteredList
<div class="header">
{@render header()}
</div>
<div class="content">
{#each filtered as d}
{@render row(d)}
{/each}
</div>你再也不用记住 MistyRose 或 PeachPuff 的十六进制代码了。
上一页 下一页
<script>
import FilteredList from './FilteredList.svelte';
import { colors } from './data.js';
</script>
<FilteredList
data={colors}
field="name"
></FilteredList>
{#snippet header()}
<header>
<span class="color"></span>
<span class="name">name</span>
<span class="hex">hex</span>
<span class="rgb">rgb</span>
<span class="hsl">hsl</span>
</header>
{/snippet}
{#snippet row(d)}
<div class="row">
<span class="color" style="background-color: {d.hex}"></span>
<span class="name">{d.name}</span>
<span class="hex">{d.hex}</span>
<span class="rgb">{d.rgb}</span>
<span class="hsl">{d.hsl}</span>
</div>
{/snippet}
<style>
header, .row {
display: grid;
align-items: center;
grid-template-columns: 2em 4fr 3fr;
gap: 1em;
loading svelte compiler