vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。

根據官檔的標題來開始吧

插槽內容

假如父元件的程式碼如下（children為註冊的子元件）：

<divid='app'> <div>這裡是父元件</div> <children> <div class=‘toslot’>這裡是插槽的內容，位於子元件內部</div> </children></div> <script> new Vue({    el: '#app', components: { children: { template: '<div>這裡是子元件，注意：沒有加入slot標籤哦！</div>' } } })</script>

渲染結果：

<divid='app'> <div>這裡是父元件</div> <div>這裡是子元件，注意：沒有加入slot標籤哦！</div></div>

上面的程式碼實際效果如下：

這裡是父元件

這裡是子元件，注意：沒有假如slot標籤哦！

是不是少了東西，對，children中<div class='toslot'>標籤內容沒有渲染出來，why?

這裡我們就要用到插槽了，插槽（slot）是用來將父元件中新增在子元件標籤中的內容（這裡指children中<div class='toslot'>）插入到子元件中，使其能夠渲染出來的的工具。

如果能理解那麼我們繼續，不理解也得往下看

現在對上面的程式碼進行修改

<divid='app'> <div>這裡是父元件</div> <children> <div>這裡是插槽的內容，位於子元件內部</div> </children></div>
<script> new Vue({    el

:'#app',
components: { children: { template: '<div>                     <slot></slot>                     這裡是子元件，注意：這裡加入slot標籤哦！                   </div>' } } })</script>

渲染結果：

<divid='app'> <div>這裡是父元件</div> <div> <div>這裡是插槽的內容，位於子元件內部</div> 這裡是子元件，注意：這裡加入slot標籤哦！ </div></div>

可以看到，子元件中slot標籤被渲染為<div>這裡是插槽的內容，位於子元件內部</div>

上面的程式碼實際效果如下：

這裡是父元件

這裡是插槽的內容，位於子元件內部

這裡是子元件，注意：沒有假如slot標籤哦！

可以看到，<div class='toslot'>內容被渲染出來了，所以，slot用法很簡單，只要在子元件中加入<slot></slot>標籤，那麼父元件裡新增到子元件標籤中所有的內容都會取代<slot></slot>區域。

注意哦，是所有內容，比如我們在新增些內容：

<divid='app'> <div>這裡是父元件</div> <children> <div>header</div> <div>main</div> <div>footer</div> copyright </children></div>
<script> new Vue({ el: '#app', components: { children: { template: '<div><slot></slot>這裡是子元件，注意：這裡加入slot標籤哦！</div>' } } })</script>

所有我們在子元件標籤中新增的內容都會被渲染出來：

這裡是父元件headermainfootercopyright 這裡是子元件，注意：沒有加入slot標籤哦！

具名插槽

具名插槽更能說明它為啥叫插槽，比如我們修改一下上面的例子，我們想要將三個div插入到三個不同的位置：

<divid='app'> <div>這裡是父元件</div> <children> <divslot='header'>header</div> <divslot='main'>main</div> <divslot='footer'>footer</div> </children></div>
<script> new Vue({ el: '#app', components: { children: { template: '<div> 1                          <slot name="header"></slot>                          2                          <slot name="main"></slot>                          3                          <slot name="footer"></slot>                        這裡是子元件，注意：3個slot標籤哦！                  </div>' } } })</script>

渲染結果如下：

這裡是父元件1header2main3footer這裡是子元件，注意：3個slot標籤哦！為父元件中插入的DOM元素新增slot='slotname'，為子元件中的slot標籤新增name='slotname'，這樣就可以一一對應的將內容新增到指定位置，就像各種硬體的介面只能接特定的接頭一樣，接頭和介面缺少任何一個都不能順利的連線，所以那兩個屬性一個都不能少。當然，對於文字節點和沒有新增slot='slotname'的元素，還想要的話就新增一個通用介面<slot></slot>將它們全部接收吧。