插槽可幫助您在components 中放置內容，
允許以嚴格的父子關係以外的其他方式來組合components。

單個插槽（Single Slot）

使用<slot>將元件裡的裡面的字樣顯示出來。

 <div id="app">
  <component>hello</component>   
</div>

<script type="text/x-template" id="SlotComponent">
  <div class="box">
    <h6>我是一個元件</h6>
    <slot>
      如果未指定任何內容，這是默認內容。
    </slot>
  </div>
</script>

Vue.component('component', {
  template: '#SlotComponent',
});

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

但是如果元件裡面為空的時候，就會顯示子元件中 <slot> 內的默認內容

 <div id="app">
  <component></component>   
</div>

範例

具名插槽(Named slots)

往往只有一個插槽是無法滿足的，這時候就可以使用命名插槽，
在<slot>中加上name屬性決定配置的內容，
並在要替換的部分給上 slot屬性，且相同的名子。

 <div id="app">
  <component>
    <template slot="header">我要來替換掉原本的header字樣</template>
    <template slot="text">我要來替換掉原本的內容內容</template>
    <h5 slot="footer">我要來替換掉原本的footer字樣</h5>
   </component>  
</div>


<script type="text/x-template" id="SlotComponent">
  <div class="card">
    <div class="card-header">
      <slot name="header">我是預設header</slot>
    </div>
    <div class="card-body">      
      <slot name="text" class="card-text">這邊是預設body</slot>
    </div>
    <div class="card-footer">
      <slot name="footer">我是預設footer</slot>
  </div>
  </div>
</script>

Vue.component('component', {
  template: '#SlotComponent',
});

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

範例