スロットを使用して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}

まとめ

🦄さあ、心ゆくまで作曲しましょう！ Svelteでスロットを使用するその他の例については、公式チュートリアルを確認してください。 チュートリアルから学ぶことができるもう1つの興味深い点は、スロットがスロット小道具と呼ばれる小道具を利用して、それらを使用してデータをコンポーネントに戻すことができることです。