寫(xiě)在前面

vue中關(guān)于插槽的文檔說(shuō)明很短，語(yǔ)言又寫(xiě)的很凝練，再加上其和methods，data，computed等常用選項(xiàng)使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開(kāi)發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫(xiě)基礎(chǔ)組件了”，于是就關(guān)閉了vue說(shuō)明文檔。

實(shí)際上，插槽的概念很簡(jiǎn)單，下面通過(guò)分三部分來(lái)講。這個(gè)部分也是按照vue說(shuō)明文檔的順序來(lái)寫(xiě)的。

進(jìn)入三部分之前，先讓還沒(méi)接觸過(guò)插槽的同學(xué)對(duì)什么是插槽有一個(gè)簡(jiǎn)單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來(lái)決定。 實(shí)際上，一個(gè)slot最核心的兩個(gè)問(wèn)題這里就點(diǎn)出來(lái)了，是顯示不顯示和怎樣顯示。

由于插槽是一塊模板，所以，對(duì)于任何一個(gè)組件，從模板種類的角度來(lái)分，其實(shí)都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個(gè)空殼子，因?yàn)樗@示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫(xiě)在組件template的哪塊，父組件傳過(guò)來(lái)的模板將來(lái)就顯示在哪塊。

單個(gè)插槽 | 默認(rèn)插槽 | 匿名插槽

首先是單個(gè)插槽，單個(gè)插槽是vue的官方叫法，但是其實(shí)也可以叫它默認(rèn)插槽，或者與具名插槽相對(duì)，我們可以叫它匿名插槽。因?yàn)樗挥迷O(shè)置name屬性。

單個(gè)插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個(gè)組件中只能有一個(gè)該類插槽。相對(duì)應(yīng)的，具名插槽就可以有很多個(gè)，只要名字（name屬性）不同就可以了。

下面通過(guò)一個(gè)例子來(lái)展示。

父組件：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="father"> 
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl"> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

子組件：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="child"> 
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3> 
            

        

    

    


        


            


            

        

        


            

                <slot></slot> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

在這個(gè)例子里，因?yàn)楦附M件在<child></child>里面寫(xiě)了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說(shuō)，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

 


    


        


            


            

        

        


            

                <div class="tmpl"> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

最終的渲染結(jié)果如圖所示：

 


    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍(lán)色填充。
            

        

    

具名插槽

匿名插槽沒(méi)有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個(gè)組件中出現(xiàn)N次。出現(xiàn)在不同的位置。下面的例子，就是一個(gè)有兩個(gè)具名插槽和單個(gè)插槽的組件，這三個(gè)插槽被父組件用同一套css樣式顯示了出來(lái)，不同的是內(nèi)容上略有區(qū)別。

父組件：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="father"> 
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="up"> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="down"> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-1</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-2</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-3</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-4</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-5</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單-6</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl"> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->1</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->2</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->3</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->4</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->5</span> 
            

        

    

    


        


            


            

        

        


            

                <span>菜單->6</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

子組件：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="child"> 
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot> 
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3> 
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="down"></slot> 
            

        

    

    


        


            


            

        

        


            

                // 匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

顯示結(jié)果如圖：

可以看到，父組件通過(guò)html模板上的slot屬性關(guān)聯(lián)具名插槽。沒(méi)有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽。

作用域插槽 | 帶數(shù)據(jù)的插槽

最后，就是我們的作用域插槽。這個(gè)稍微難理解一點(diǎn)。官方叫它作用域插槽，實(shí)際上，對(duì)比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫(xiě)

 


    


        


            


            

        

        


            

                匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot> 
            

        

    

    


        


            


            

        

        


            

                具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot> 
            

        

    

但是作用域插槽要求，在slot上面綁定數(shù)據(jù)。也就是你得寫(xiě)成大概下面這個(gè)樣子。

 


    


        


            


            

        

        


            

                <slot name="up" :data="data"></slot> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

我們前面說(shuō)了，插槽最后顯示不顯示是看父組件有沒(méi)有在child下面寫(xiě)模板，像下面那樣。

 


    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                html模板
            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

寫(xiě)了，插槽就總得在瀏覽器上顯示點(diǎn)東西，東西就是html該有的模樣，沒(méi)寫(xiě)，插槽就是空殼子，啥都沒(méi)有。
OK，我們說(shuō)有html模板的情況，就是父組件會(huì)往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內(nèi)容呢？

正因?yàn)樽饔糜虿宀劢壎艘惶讛?shù)據(jù)，父組件可以拿來(lái)用。于是，情況就變成了這樣：樣式父組件說(shuō)了算，但內(nèi)容可以顯示子組件插槽綁定的。

我們?cè)賮?lái)對(duì)比，作用域插槽和單個(gè)插槽和具名插槽的區(qū)別，因?yàn)閱蝹€(gè)插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽，父組件只需要提供一套樣式（在確實(shí)用作用域插槽綁定的數(shù)據(jù)的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒(méi)有提供數(shù)據(jù)，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個(gè)人名數(shù)組。

父組件：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="father"> 
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3> 
            

        

    

    


        


            


            

        

        


            

                <!--第一次使用：用flex展示數(shù)據(jù)--> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user"> 
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl"> 
            

        

    

    


        


            


            

        

        


            

                <span v-for="item in user.data">{{item}}</span> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第二次使用：用列表展示數(shù)據(jù)--> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user"> 
            

        

    

    


        


            


            

        

        


            

                <ul> 
            

        

    

    


        


            


            

        

        


            

                <li v-for="item in user.data">{{item}}</li> 
            

        

    

    


        


            


            

        

        


            

                </ul> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第三次使用：直接顯示數(shù)據(jù)--> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user"> 
            

        

    

    


        


            


            

        

        


            

                {{user.data}}
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽--> 
            

        

    

    


        


            


            

        

        


            

                <child> 
            

        

    

    


        


            


            

        

        


            

                我就是模板
            

        

    

    


        


            


            

        

        


            

                </child> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

子組件：

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child"> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                // 作用域插槽 
            

        

    

    


        


            


            

        

        


            

                <slot  :data="data"></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

結(jié)果如圖所示：

github

以上三個(gè)demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。

https://github.com/cunzaizhuyi/vue-slot-demo