Vue.jsの<slot>要素にはユニークなname属性を付与することで、名前付きスロットを渡すことができる。

名前付きスロットを用いれば、1つのコンポーネント内に複数のslotコンテンツを渡すことが可能となる。

例えば親コンポーネント側で、

<BasePage>

 　<template #header>

 　　　<h1>this is header</h1>

  </template>

　　<template #footer>

 　　　<p>this is footer</p>

  </template>

</BasePage>

とすると、

子コンポーネント側に、name=”header”, name=”footer”のslotを渡せる 。

あとは、子コンポーネント側で

<header>

  <slot name="header"></slot>

</header>

<footer>

  <slot name="footer"></slot>

</footer>

とすれば各nameに対応したslotに渡される。

ちなみにname属性を付与しない場合は暗黙的にname=”default”が渡されている。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

小林 聡太

Webエンジニアしてます。2020年に独立しました。 技術的なことから個人事業主として必要なことまで色々お話しします。

最新記事 by 小林 聡太 (全て見る)

• Laravelのフォームリクエストでソフトデリートを採用しているテーブルを扱う時の注意点 - 2024年3月11日
• Laravelのクエリビルダを使用したレコードの存在判定 - 2024年3月11日
• PHPの正規表現系の関数を使用するときに便利なブラウザツール - 2023年12月31日