いままでのコンポーネントについての記事はこちら↓
htmlタグを含めて子にデータを送る時
親テンプレート上で、子コンポーネントのタグ内に送りたいHTMLを記載する。
{{}}も使用可能。
<CountHeader>
<h1>カウント</h1>
<p>{{ number }}</p>
</CountHeader>
子テンプレート上では、受け取りたい箇所に<slot>を記載する。
<template>
<div>
<slot></slot>
</div>
</template>
Styleをかけたい場合、親でもslotを呼び出した子でもどちらのコンポーネント上でCSSを書いても適用される。
親、子どちらにも記載した場合、親に書いたCSSが適用される。
フォールバックコンテンツ
slotタグ内にデフォルト表示のコンテンツを入れる事で、slotが空の時にデフォルト表示がされるようになる。
<template>
<div>
<slot><p>中身がありません。</p></slot>
</div>
</template>
複数のslotを使用する
<template>とv-slot:を使って、識別する名前を付ける。
受け渡しをしたい値をそれぞれ<template>タグで囲む。
ここでは必ず<template>タグを使用する。
templateタグ内にv-slot:を設ける。v-slot:の後に来る文字列は連携するための名前を記載。
<CountHeader>
<template v-slot:title>
<h1>カウント</h1>
</template>
<template v-slot:number>
<p>{{ number }}</p>
</template>
</CountHeader>
子コンポーネント側では、それぞれのslotに受け取りたいデータ（template）に付けた名前を付与して呼び出す。
呼び出しは、<slot>タグ内にname=”呼び出したい名前”を設定する。
<template>
<div>
<!-- タイトルを表示 -->
<slot name="title"></slot>
<!-- 数字を表示 -->
<slot name="number"></slot>
</div>
</template>
<template>以外で記述した内容は、デフォルトslotとなる。
templateで名前を付与していないデータに対して、Vueが自動的にtemplateで囲ったうえで、v-slot:defaultを命名している。
子コンポーネント上にある<slot>にも自動的にname=”default”をつけている。
<template v-slot:title> <h1>カウント</h1> </template> <!-- デフォルト --> <h1>デフォルトスロット</h1>
<!-- タイトルを表示 --> <slot name="title"></slot> <!-- デフォルト --> <slot></slot>
slotを使って子データにアクセスする
子コンポーネントに下記のようなデータがあると仮定します。
<script>
export default {
data(){
return {
user:{
name:'Mory',
age:38
},
}
}
};
</script>
このデータを親がアクセスするには、子で定義しているslotにv-bindで受け渡すデータを定義する。
<slot name="title" :user="user"></slot>
親側では、template内に記載しているv-slot:[名前]に「＝」を繋げて子データにアクセスできるように名前を付与する。
<template v-slot:title="slotProps"> </template>
子データにアクセスする時は、
{{v-slotで定義した名前.オブジェクト名.アクセスしたい値}}
で呼び出す事ができる。それぞれドットで繋げる。
<template v-slot:title="slotProps">
<h2>Hello!{{slotProps.user.name}}</h2>
</template>
デフォルトslotしかない場合は、templateを使わなくてもコンポーネント名のタグ内に記述することができる。
v-slot:の名前はデフォルトの場合、自動付与されるため、「:default」も省略可能。
<CountHeader v-slot="slotProps">
動的slot
動的なslotは[]（カッコ）で指定ができる。
<!-- template上 -->
<template v-slot:[title]="slotProps">
<!-- dataでv-slotの名前を指定する -->
data() {
return {
title:"title"
};
}
v-slotを省略して書く
v-slotは「＃」（シャープ）に置き換えることができる。
v-slot:number → #number
v-slot:[title] → # [title]
デフォルトslotの場合は、「default」を明示的にする。
v-slot= “slotProps” → #default= “slotProps”
