由于代码片段(如函数)只是值,因此可以将它们作为 props 传递给组件。
¥Since snippets — like functions — are just values, they can be passed to components as props.
使用这个 <FilteredList>
组件。它的工作是过滤传递给它的 data
,但它对如何渲染数据没有任何意见 - 这是父组件的责任。
¥Take this <FilteredList>
component. Its job is to filter the data
that gets passed into it, but it has no opinions about how that data should be rendered — that’s the responsibility of the parent component.
我们已经定义了一些代码片段。首先将它们传递到 <FilteredList>
:
¥We’ve already got some snippets defined. Begin by passing them into the <FilteredList>
:
<FilteredList
data={colors}
field="name"
{header}
{row}
></FilteredList>
然后,在另一边,将 header
和 row
声明为 props:
¥Then, on the other side, declare header
and row
as props:
<script>
let { data, field, header, row } = $props();
// ...
</script>
<script lang="ts">
let { data, field, header, row } = $props();
// ...
</script>
最后,用渲染标签替换占位符内容:
¥Finally, replace the placeholder content with render tags:
<div class="header">
{@render header()}
</div>
<div class="content">
{#each filtered as d}
{@render row(d)}
{/each}
</div>
你再也不必记住 MistyRose
或 PeachPuff
的十六进制代码了。
¥Never again will you have to memorize the hex code for MistyRose
or 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;
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>