スロットを使用してSvelteコンポーネントを構成する
Svelteでは、コンポーネントはスロットを使用して一緒に構成できます。 構成とは、コンポーネントに他のコンポーネントまたはHTML要素を含めることを許可することを意味します。 Svelteでは、コンポーネントまたはマークアップを受け入れることができるコンポーネント内の<slot>
コンポーネントを使用することでスロットが可能になります。
これは、HTML要素で自然に行うためにすでに使用されているものです。 単純なCard
コンポーネントを作成して、<slot>
コンポーネントの使用方法を示しましょう。
このCard
コンポーネントは、Svelteで小道具を使用してをデモンストレーションするために使用したものと似ています。
<script>
export let title;
export let imageUrl;
</script>
<style>
/* Something to make it look pretty */
</style>
<section>
<h1>
<img src={imageUrl} alt="Avatar for {title}" />
{title}
</h1>
<div>
<slot />
</div>
</section>
ご覧のとおり、コンポーネントのユーザーがカスタムコンポーネントとマークアップを追加できるようにする場合は、<slot>
コンポーネントを配置するだけです。
自己閉鎖的に使用できます。
<slot />
または終了タグ付き:
<slot></slot>
プレースホルダー/フォールバックコンテンツ
<slot>
コンポーネントなしでフォールバックコンテンツを配置できます。このコンテンツは、スロットを含むコンポーネントが次の要素なしで使用される場合に使用されます。
<script>
export let title;
export let imageUrl;
</script>
<style>
/* Something to make it look pretty */
</style>
<section>
<h1>
<img src={imageUrl} alt="Avatar for {title}" />
{title}
</h1>
<div>
<slot>
<p>😢 No details!</p>
</slot>
</div>
</section>
次に、このCard
コンポーネントの使用例を示します。
<script>
import Card from "./Card.svelte";
const items = [
{
title: "Pirate",
description: "Argg!!",
imageUrl: "https://alligator.io/images/pirate.svg"
},
{
title: "Chef",
description: "À la soupe!",
imageUrl: "https://alligator.io/images/chef.svg"
}
];
</script>
{#each items as item}
<Card title={item.title} imageUrl={item.imageUrl}>
<hr />
<p>{item.description}</p>
</Card>
{/each}
これにより、<slot>
コンポーネントの代わりに、Card
コンポーネント内にアイテムの説明を含む水平線と段落が表示されます。
名前付きスロット
コンポーネントごとに1つのスロットに制限されません。 <slot>
コンポーネントのname属性を使用してスロットに名前を付けることができ、コンポーネント内に必要な数のスロットを含めることができます。
次の例からわかるように、名前付きスロットをデフォルト/名前なしスロットと組み合わせることもできます。
<style>
/* Make it pretty! */
</style>
<section>
<slot name="title" />
<slot name="description">
<p>😮 No description!</p>
</slot>
<footer>
<slot />
</footer>
</section>
そして、各スロット位置の親要素に name 属性を追加することにより、名前付きスロットを利用します。
<script>
import Card from "./Card.svelte";
const items = [
{
title: "Pirate",
description: "Argg!!",
imageUrl: "https://alligator.io/images/pirate.svg"
},
{
title: "Chef",
description: "À la soupe!",
imageUrl: "https://alligator.io/images/chef.svg"
}
];
</script>
{#each items as item}
<Card>
<h1 slot="title">
<img src={item.imageUrl} alt="Avatar for {item.title}" />
{item.title}
</h1>
<p slot="description">{item.description}</p>
<p>Something else!</p>
</Card>
{/each}
当然、デフォルトのスロットは1つだけです。
まとめ
🦄さあ、心ゆくまで作曲しましょう! Svelteでスロットを使用するその他の例については、公式チュートリアルを確認してください。 チュートリアルから学ぶことができるもう1つの興味深い点は、スロットがスロット小道具と呼ばれる小道具を利用して、それらを使用してデータをコンポーネントに戻すことができることです。