スニペットを使用すると、コンテンツを別のファイルに抽出することなく、コンポーネント内で再利用できます。

この演習では、三猿の表を、それらのユニコードエスケープシーケンスとHTMLエンティティとともに作成します。今のところ、猿は1匹しかいません。

もちろん、マークアップを複製することもできます。または、{ 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>

残りの猿のためにスニペットを使用する前に、スニペットにデータを渡す必要があります。スニペットには、0個以上のパラメータを設定できます。

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

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

必要に応じて、分割代入されたパラメータも使用できます。

残りの猿を追加します。

• '🙈', '見ざる'
• '🙉', '聞かざる'
• '🙊', '言わざる'

最後に、不要になった<script>ブロックを削除します。

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

スニペットはコンポーネント内の任意の場所に宣言できますが、関数と同様に、同じ 'スコープ' または子スコープのレンダリングタグでのみ表示されます。