「Vue.js」の「スロット」を学ぶ
「スロット」の仕組みについて学んでいきたいと思いますが、「スロット」は、「コンポーネントの表示内容」を後から差し込める機能です。
「コンポーネント」の表示内容が「常に固定」という場合は不要かもしれませんが、「ページによって表示内容を変えたい」といったニーズがある場合は「スロット」が役に立てる可能性があります。
それでは、具体的に「スロット」について学んでいきたいと思います。
「スロットの仕組み」を学ぶ
スロットには、
- 名前なしスロット
- 名前付きスロット
の2種類があります。
まずはじめに「名前なしスロット」について学んでいきたいと思います。
名前なしスロット
「名前なしスロット」を利用したプログラムは下記のようになります。
<div id="app">
<parent-comp></parent-comp>
</div>
<script>
const childComp = {
template: '<p>子コンポーネントです。<slot></slot></p>'
}
Vue.component('parent-comp', {
template: '<child-comp>こんにちは。</child-comp>',
components: {
'child-comp': childComp
},
})
let app = new Vue({
el: '#app'
})
</script>
のようになります。このプログラムを実行すると、
のようになります。
「子コンポーネント」の「template」の中に「slot要素」があります。
そして、「親コンポーネント」の「template」の中にある「子コンポーネント（child-comp要素）」には「こんにちは。」と書いています。
「親コンポーネント」で指定した「こんにちは。」という文字列が「子コンポーネント」の「slot要素」と置き換わっているのがわかります。
このように「コンポーネントの外側」から「データを差し込める機能」が「スロット」です。
名前付きスロット
「名前付きスロット」はスロットに名前を付けて、その名前によってスロットを指定してコンテンツを差し込める機能です。
「名前付きスロット」を利用したプログラムは下記のようになります。
<div id="app">
<parent-comp></parent-comp>
</div>
<script>
const childComp = {
template: '<p>子コンポーネントです。<slot name="first"></slot><slot name="second"></slot></p>'
}
Vue.component('parent-comp', {
template: '<child-comp><template v-slot:first>１番目のスロットです。</template><template v-slot:second>２番目のスロットです。</template></child-comp>',
components: {
'child-comp': childComp
},
})
let app = new Vue({
el: '#app'
})
</script>
このプログラムを実行すると、
のようになります。
まず、「子コンポーネント」の「slot要素」には「name属性の値」によって名前が付けられています。
template: '<p>子コンポーネントです。<slot name="first"></slot><slot name="second"></slot></p>'
そして、「親コンポーネント」では、「v-slotディレクティブ」によって「slotの名前」を指定して「子コンポーネント」にコンテンツを渡しています。
そして、「名前付きスロット」を利用する場合は「template要素」を利用する必要があります。
template: '<child-comp><template v-slot:first>１番目のスロットです。</template><template v-slot:second>２番目のスロットです。</template></child-comp>',
少し複雑ですが、少しずつ考え方に慣れていきたいと思います。
フォールバックコンテンツ
「フォールバックコンテンツ」は、「スロット」にコンテンツが渡されなかった場合に表示されるコンテンツです。
「フォールバックコンテンツ」を利用したプログラムは下記のようになります。
<div id="app">
<parent-comp></parent-comp>
</div>
<script>
const childComp = {
template: '<p>子コンポーネントです。<slot name="first">空の場合に表示されます。</slot></p>'
}
Vue.component('parent-comp', {
template: '<child-comp></child-comp>',
components: {
'child-comp': childComp
},
})
let app = new Vue({
el: '#app'
})
</script>
のようになります。このプログラムを実行すると、
→「Vue.jsプログラムの実行（フォールバックコンテンツ）」
のようになります。
「親コンポーネント」の
template: '<child-comp></child-comp>',
では「template要素」が無いため「名前付きスロット」に値が渡されていません。
そのため、「フォールバックコンテンツ」の「空の場合に表示されます。」という文字列が表示されています。