插槽酌呆，也就是slot，是組件的一塊HTML模板坊谁，這塊模板顯示不顯示费彼、以及怎樣顯示由父組件來決定。 實際上口芍，一個slot最核心的兩個問題在這里就點出來了箍铲，是顯示不顯示和怎樣顯示。
由于插槽是一塊模板鬓椭，所以颠猴，對于任何一個組件，從模板種類的角度來分小染，其實都可以分為非插槽模板和插槽模板兩大類翘瓮。
非插槽模板指的是html模板，比如‘div裤翩、span资盅、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由組件自身控制呵扛；
插槽模板是slot每庆，它是一個空殼子，因為它的顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制今穿。但是插槽顯示的位置確由子組件自身決定缤灵，slot寫在組件template的什么位置，父組件傳過來的模板將來就顯示在什么位置荣赶。
單個插槽 | 默認插槽 | 匿名插槽
首先是單個插槽凤价，單個插槽是vue的官方叫法鸽斟，但是其實也可以叫它默認插槽拔创，或者與具名插槽相對，我們可以叫它匿名插槽富蓄。因為它不用設(shè)置name屬性剩燥。
單個插槽可以放置在組件的任意位置，但是就像它的名字一樣立倍，一個組件中只能有一個該類插槽灭红。相對應(yīng)的，具名插槽就可以有很多個口注，只要名字（name屬性）不同就可以了变擒。
下面通過一個例子來展示。
父組件：
<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>
在這個例子里寝志，因為父組件在里面寫了html模板娇斑，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說材部，子組件的匿名插槽被使用了毫缆，是被下面這塊模板使用了。
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
最終的渲染結(jié)果如圖所示：
注：所有demo都加了樣式乐导，以方便觀察苦丁。其中，父組件以灰色背景填充物臂，子組件都以淺藍色填充旺拉。
具名插槽
匿名插槽沒有name屬性，所以是匿名插槽棵磷，那么账阻，插槽加了name屬性，就變成了具名插槽泽本。具名插槽可以在一個組件中出現(xiàn)N次淘太，出現(xiàn)在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的組件蒲牧，這三個插槽被父組件用同一套css樣式顯示了出來撇贺，不同的是內(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>
可以看到冰抢，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽松嘶。沒有slot屬性的html模板默認關(guān)聯(lián)匿名插槽。
作用域插槽 | 帶數(shù)據(jù)的插槽
最后挎扰，就是我們的作用域插槽翠订。這個稍微難理解一點。官方叫它作用域插槽遵倦，實際上尽超，對比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽梧躺。什么意思呢似谁，就是前面兩種，都是在組件的template里面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求掠哥，在slot上面綁定數(shù)據(jù)巩踏。也就是你得寫成大概下面這個樣子。
slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我們前面說了续搀，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板塞琼，像下面那樣。
<child>
html模板
</child>
寫了禁舷，插槽就總得在瀏覽器上顯示點東西彪杉，東西就是html該有的模樣，沒寫榛了，插槽就是空殼子在讶，啥都沒有。
OK霜大，我們說有html模板的情況构哺，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢战坤，這由父組件的html+css共同決定曙强，但是這套樣式里面的內(nèi)容呢？
正因為作用域插槽綁定了一套數(shù)據(jù)途茫，父組件可以拿來用碟嘴。于是，情況就變成了這樣：樣式父組件說了算囊卜，但內(nèi)容可以顯示子組件插槽綁定的娜扇。
我們再來對比错沃，作用域插槽跟單個插槽和具名插槽的區(qū)別，因為單個插槽和具名插槽不綁定數(shù)據(jù)雀瓢，所以父組件提供的模板一般要既包括樣式又包括內(nèi)容枢析，上面的例子中，你看到的文字刃麸，“菜單1”醒叁，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽泊业，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數(shù)據(jù)的前提下）把沼。
下面的例子，你就能看到吁伺，父組件提供了三種樣式(分別是flex饮睬、ul、直接顯示)箱蝠，都沒有提供數(shù)據(jù)续捂，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個數(shù)組（一堆人名的那個數(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> // 作用子組件：
<template>
<div class="child">
<h3>這里是子組件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
