什麼是插槽：

顧名思義，一個蘿蔔一個坑。子元件建立的標籤插入的內容不會在瀏覽器顯示。這時需要用到Vue新的語法slot。

Vue為什麼要用插槽：

元件標籤是元件定義好的內容，當我們想在元件標籤內放一些東西的時候。是不具有作用的。他不會顯示。

<foo>
    <div>hello</div>
</foo>

瀏覽器中不會顯示hello。dom結構中也沒有div

Vue.component('foo', {
    template: `<div>
                <p>dll</p>                       
                </div>`
})
var vm = new Vue({
    el: '#app',
})
 

顯示結果為dll。明顯，自定義元件標籤foo裡面新增的div內容hello不會被展示。

當我們使用插槽後

Vue.component('foo', {
    template: `<div>
        <slot></slot> //新增插槽標籤
        <p>dll</p>                       
        </div>`
})
var vm = new Vue({
    el: '#app',
})

這是插槽的簡單應用。

slot的特點：

插槽的位子由元件標籤覺定。插槽的內容由父元件控制。

插槽可以寫預設內容。當子元件沒有內容的時候，就會顯示預設內容

插槽分為具名插槽和匿名插槽（單個插槽不需要寫名name）。需要多個插槽的時候需要使用具名插槽，實現一對一的操作。

具名插槽的使用：以下程式碼我想實現的是head和body分別插入子元件的兩個插槽裡。但瀏覽器結果並不是這樣

以上說明。子元件的內容會作為一組全部插入一個插槽中。

所以現在我們需要使用具名插槽。給每一一個對應的標籤和插槽一一對應。這樣就實現了一個蘿蔔一個坑。

難點：作用域插槽（非常實用）

首先我們在子元件定義了一個插槽。插槽的內容為遍歷一個數組新增到對應的標籤上（標籤是啥用父元件決定）

怎麼定義作用域插槽：

在子元件標籤中新增template模板標籤。填寫slot-scope=“xxx”（xxx為接收子元件傳遞過來的資料內容。自定義形參）

在模板標籤中填寫需要展示的標籤。