跳至主要內容
進階 Svelte 重複使用內容 片段和渲染標籤

片段可讓您重複使用元件內的內容，而無需將其提取到單獨的檔案中。

在本練習中，我們將建立一個關於三不猴的表格，以及它們的 Unicode 跳脫序列和 HTML 實體。到目前為止，我們只有一隻猴子。

當然，我們可以複製標記。或者，我們可以建立一個{ emoji, description }物件的陣列，並將其傳遞到{#each ...}區塊中。但更簡潔的解決方案是將標記封裝在可重複使用的區塊中。

首先宣告一個片段

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>&amp#{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>

如果您願意，也可以使用解構參數。

加入其他猴子

  • '🙈', '不看惡事'
  • '🙉', '不聽惡事'
  • '🙊', '不說惡事'

最後，刪除我們不再需要的<script>區塊

App
<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>