Skip to main content
Svelte基础
介绍
响应
属性Props
逻辑表达式
事件
绑定
Classes和样式
动作Actions
转场
Svelte高阶
响应式进阶
内容复用
动画
高级绑定
高级转场
上下文API
特殊元素
脚本模块
接下来
SvelteKit基础
介绍
路由
加载数据
Headers和cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Svelte高阶 内容复用 给组件传递代码片段

代码片段就像函数一样，也可以把它做为组件的属性(props)值.
举个例子🌰： 组件<FilteredList>负责从data中过滤数据，至于过滤后的结果怎么显示由它的父组件负责.
我们已经定义好了一些代码片段，可以把它们传递给<FilteredList>:

Since snippets — like functions — are just values, they can be passed to components as props. 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. We’ve already got some snippets defined. Begin by passing them into the <FilteredList>:

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

然后在FilteredList.svelte中定义属性header和row:

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>

So easy，妈妈再也不用担心我记不住MistyRose和PeachPuff里的16进制代码了.

Never again will you have to memorize the hex code for MistyRose or PeachPuff.

Edit this page on GitHub

previous next
代码片段和渲染标签
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>