masakariblog

日々のマサカリと戦い、強くなる過程を書くブログ

Vue.jsをもくもくするその17 コンポーネント編 その3

component_slot.html

<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="app">
            <slot-coin>
                <template v-slot:header>
                    <h3>やまもと</h3>
                </template>
                <p>頑張るぞー!</p>
                <template v-slot="footer">
                    <span>たけのこ</span>
                </template>
                <p>いかがでしょうか?</p>
            </slot-coin>
            <drink-type>
                <template v-slot:default="slotProp">
                    {{ slotProp.drink.name }} {{ slotProp.drink.price }}
                </template>
            </drink-type>
        </div>
        <script src="https://jp.vuejs.org/js/vue.js"></script>
        <script src="component_slot.js"></script>
    </body>
</html>

スロットについて

スロット。スロットって聞くとメダルが出るスロットの方を思い浮かべてしまいますね。

スロット機能は、デフォルトで表示させたいコンテンツを埋め込むときに使用します。

複数埋め込む場合は、v-slotディレクティブを使用します。

そうすることで、name属性によって区別が行え、適切な場所にデフォルトで埋め込みたいコンテンツを設置することができます。

component_slot.js

Vue.component('slot-coin', {
  props: [ 'gameCoin' ],
  template: `<div>
             <header>コインザックザクやで、<slot name="header">ゲスト</slot>さん</header>
             <div>
              <slot>みかん</slot>
             </div>
             <footer>
              <slot name="footer">それはきゃべつ</slot>
             </footer>
             </div>`,
})
Vue.component('drink-type', {
  data: function() {
    return {
      drink: {
        name: 'コーヒー',
        price: 200,
        temperature: 'hot'
      }
    }
  },
  template: `<div>
    <slot v-bind:drink="drink">{{ drink.name }} {{ drink.price }} </slot>
    </div>`
});

new Vue({
  el: '#app',
});