vu3: <slot>

スロットは、コンポーネントの中にコンテンツを埋め込む事ができる。文章で理解するよりも、出力例を見るのが早いと思う。

スロットの使用例

コンポーネントの定義

<template>
<h2>ハロースロット</h2>
<div>
    <slot></slot>
</div>
</template>

コンポーネント利用

<component>
    <b>スロットに出力されるhtml</b>
</component>

出力

<h2>ハロースロット</h2>
<div>
    <b>スロットに出力されるhtml</b>
</div>

コンポーネント内のタグの部分がコンポーネントタグの中身に置き変えられらる。スロットは複数箇所で使用する事ができる。

スロットが複数の例

コンポーネントの定義

<template>
<h2>コンポーネント</h2>
<div>
    <slot name="slot1"></slot>
</div>
<slot name="slot2"></slot>
</template>

コンポーネントの利用

<component>
    <template v-slot:slot1>
        <b>スロット1に出力されるhtml</b>
    </template>
    <template v-slot:slot2>
        <b>スロット2に出力されるhtml</b>
    </template>

</component>

出力

<h2>コンポーネント</h2>
<div>
    <b>スロット1に出力されるhtml</b>
</div>
<b>スロット2に出力されるhtml</b>

propsで管理する必要がないコンテンツはで埋め込めば、実装が単純で良いと思う。あとは、htmlのレイアウトファイルにヘッダ・コンテンツ・フッタのそれぞれの要素をで構築するような時は便利かな？