Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

由于代码片段(如函数)只是值,因此可以将它们作为 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>:

App
<FilteredList
	data={colors}
	field="name"
	{header}
	{row}
></FilteredList>

然后,在另一边,将 headerrow 声明为 props:

¥Then, on the other side, declare header and row as props:

FilteredList
<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:

FilteredList
<div class="header">
	{@render header()}
</div>

<div class="content">
	{#each filtered as d}
		{@render row(d)}
	{/each}
</div>

你再也不必记住 MistyRosePeachPuff 的十六进制代码了。

¥Never again will you have to memorize the hex code for MistyRose or 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>