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”が渡されている。
入会申込
ログイン
