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高阶 内容复用 隐式属性

小主，贴心的Svelte还提供了个方便的功能哦,你可以把代码片段header和row移动到标签<FilteredList>里, 然后删掉属性{header}和{row}:

As an authoring convenience, snippets declared directly inside components become props on those components. Take the header and row snippets and move them inside <FilteredList>:

App
<FilteredList
	data={colors}
	field="name"
	 {header} {row}
>
	{#snippet header()}...{/snippet}

	{#snippet row(d)}...{/snippet}
</FilteredList>

 {#snippet header()}...{/snippet} 

 {#snippet row(d)}...{/snippet}

你会发现代码仍然可以正常运行，这是因为贴心的Svelte把声明在组件标签内部的代码片段自动添加到了组件属性上，这样小主就可以少敲几下键盘了。另外组件标签内部没有声明为代码片段的代码块会添加为children属性。
我们可以去掉header代码块的代码片段声明, 然后在组件FilteredList内部就可以把属性header换成children了:

Any content inside a component that is not part of a declared snippet becomes a special children snippet. Since header has no parameters, we can turn it into children by removing the block tags... ...and renaming the header prop to children on the other side:

App
{#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}
FilteredList
<script>
	let { data, field, children, row } = $props();

	// ...
</script>
<script lang="ts">
	let { data, field, children, row } = $props();

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

是不是方便一些了， 快夸夸我💕💕💕

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
81
82
<script>
	import FilteredList from './FilteredList.svelte';
	import { colors } from './data.js';
</script>
 
<FilteredList
	data={colors}
	field="name"
	{header}
	{row}
></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>