跳至主要内容
高级 Svelte 重复使用内容 代码片段和渲染标签

代码片段允许你在组件中重复使用内容，而无需将其提取到单独的文件中。

在本练习中，我们创建了一个关于三只聪明的猴子的表格，以及它们的 Unicode 转义序列和 HTML 实体。到目前为止，我们只有一个猴子。

当然，我们可以复制标记。或者我们可以创建一个 { emoji, description } 对象数组，并将其传递给 {#each ...} 块。但更简洁的解决方案是将标记封装在可重用的块中。

首先，声明一个代码片段

应用
{#snippet monkey()}
	<tr>
		<td>{emoji}</td>
		<td>{description}</td>
		<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
		<td>&amp#{emoji.codePointAt(0)}</td>
	</tr>
{/snippet}

在我们渲染它之前，猴子不再可见。让我们这样做

应用
<tbody>
	{#snippet monkey()}...{/snippet}

	{@render monkey()}
</tbody>

在我们能够将代码片段用于其他猴子之前，我们需要将数据传递到代码片段中。代码片段可以有零个或多个参数

应用
<tbody>
	{#snippet monkey(emoji, description)}...{/snippet}

	{@render monkey('🙈', 'see no evil')}
</tbody>

如果你愿意，也可以使用解构参数。

添加其余的猴子

  • '🙈', '看不到邪恶'
  • '🙉', '听不到邪恶'
  • '🙊', '说不出邪恶'

最后，删除我们不再需要的 <script> 块

应用
<script>
	let emoji = '🙈';
	let description = 'see no evil';
</script>

代码片段可以在组件中的任何位置声明，但与函数一样，仅对同一“作用域”或子作用域中的渲染标签可见。

在 GitHub 上编辑此页面

上一页 下一页
反应式内置函数
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
<script>
	let emoji = '🙈';
	let description = 'see no evil';
</script>
 
<table>
	<thead>
		<tr>
			<th>emoji</th>
			<th>description</th>
			<th>unicode escape sequence</th>
			<th>html entity</th>
		</tr>
	</thead>
 
	<tbody>
		<tr>
			<td>{emoji}</td>
			<td>{description}</td>
			<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
			<td>&amp#{emoji.codePointAt(0)}</td>
		</tr>
	</tbody>
</table>
 
<style>
	th, td {
		padding: 0.5em;
	}
 
	td:nth-child(3),
	td:nth-child(4) {
		font-family: monospace;
	}
</style>