由于代码片段（像函数一样）只是值，因此可以将其作为属性传递给组件。
以这个 <FilteredList> 组件为例。它的作用是过滤传递给它的 data，但它对如何渲染这些数据没有自己的观点——这是父组件的责任。
我们已经定义了一些代码片段。首先将它们传递到 <FilteredList> 中
App
<FilteredList
data={colors}
field="name"
{header}
{row}
></FilteredList>然后，在另一边，将 header 和 row 声明为属性
FilteredList
<script>
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 的十六进制代码了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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;
padding: 0.1em;
background: var(--bg-1);
border-radius: 0.2em;
}
header {font-weight: bold;
}
.row:hover {background: var(--bg-2);
}
.color {aspect-ratio: 1;
height: 100%;
border-radius: 0.1em;
}
.rgb, .hsl {display: none;
}
@media (min-width: 40rem) { header, .row {grid-template-columns: 2em 4fr 3fr 3fr;
}
.rgb {display: block;
}
}
@media (min-width: 60rem) { header, .row {grid-template-columns: 2em 4fr 3fr 3fr 3fr;
}
.hsl {display: block;
}
}
</style>