代码片段允许你在组件内复用内容，而无需将其提取到单独的文件中。
在这个练习中，我们将创建一个三只明智猴子的表格，包括它们的 Unicode 转义序列和 HTML 实体。目前，我们只有一只猴子。
译者注：三只明智猴子是日本的一则图绘格言，含义是 “see no evil, hear no evil, speak no evil”。在佛教传统中，它是关于避免邪恶的思想和行为。
当然，我们可以复制标记。或者我们可以创建一个包含 { emoji, description } 对象的数组，并将其传入 {#each ...} 块中。但是一个更整洁的解决方案是将标记封装在一个可复用的块中。
首先声明一个片段（snippet）：
App
{#snippet monkey()}
<tr>
<td>{emoji}</td>
<td>{description}</td>
<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
<td>&#{emoji.codePointAt(0)}</td>
</tr>
{/snippet}在我们渲染它之前，这只猴子是不可见的。让我们来渲染它：
App
<tbody>
{#snippet monkey()}...{/snippet}
{@render monkey()}
</tbody>在我们可以为其余的猴子使用这个片段之前，我们需要向片段传递数据。片段可以有零个或多个参数：
App
<tbody>
{#snippet monkey(emoji, description)}...{/snippet}
{@render monkey('🙈', 'see no evil')}
</tbody>如果你愿意，也可以使用解构参数。
添加其余的猴子：
'🙈', 'see no evil''🙉', 'hear no evil''🙊', 'speak no evil'
最后，删除我们不再需要的 <script> 块：
App
<script>
let emoji = '🙈';
let description = 'see no evil';
</script><script lang="ts">
let emoji = '🙈';
let description = 'see no evil';
</script>代码片段可以在组件的任何位置声明，但是就像函数一样，它们只对同一”作用域”或子作用域中的渲染标签可见。
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>&#{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>