【Vue】入門編(slotを使用したコンテンツの差し込み)

こんにちは。
本日はVueメモです。

概要

用意したコンポーネントに親側からコンテンツを差し込めるようにする。
このとき使用するのがslotと呼ばれるもの。

本記事では、slotと名前付きslotについて記載します。

slot

まずはサンプルから。

html

<div id="app">
    <title-component></title-component>
    <title-component>こんにちは！</title-component>
</div>

javascript

<script>
    var TitleComponent = Vue.extend({
        template: `
            <div class="title-area">
                <h1><slot>HELLO!</slot></h1>
            </div>
        `
    })

    new Vue({
                el: '#app',
                components: {
                    'title-component': TitleComponent
                }
            })
</script>

templateのslotタグの部分が差し込み可能な部分です。
<title-component></title-component>は何も差し込みを行わないので
デフォルトの「HELLO!」が表示されます。

<title-component>こんにちは！</title-component>の部分は
差し込みを行っているので「HELLO!」ではなく、「こんにちは！」が表示されます。

実際には以下のようの展開されています。

<div id="app">
    <div class="title-area">
        <h1>HELLO!</h1>
    </div>
    <div class="title-area">
        <h1>こんにちは！</h1>
    </div>
</div>

名前付きslot

名前付きslotはその名の通り、slotに名前がついています。
さっそく、サンプルを見ていきましょう。

html

<div id="app">
    <page-component>
        <template v-slot:header>
            <h3>この部分はヘッダーです。</h3>
        </template>

        <p>このページについて。</p>
        <p>スロットについての勉強です。</p>

        <template v-slot:footer>
            <p>この部分はフッターです。</p>
        </template>
    </page-component>
</div>

javascript

<script>
    var PageComponetn = Vue.extend({
        template: `
            <div class="page-area">
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
        `
    })

    new Vue({
        el: '#app',
        components: {
            'page-component': PageComponetn
        }
    })
</script>

となっていますね。
コンテンツの差し込みを行う際は、
<template v-slot:XXX>とし、名前を指定してます。

実際には以下のようの展開されています。

<div id="app">
    <div class="page-area">
        <header>
            <h3>この部分はヘッダーです。</h3>
        </header>
        <main>
            <p>このページについて。</p>
            <p>スロットについての勉強です。</p>
        </main>
        <footer>
            <p>この部分はフッターです。</p>
        </footer>
    </div>
</div>

以上です。