單個插槽|默認插槽|匿名插槽
首先是單個插槽搬素，單個插槽的英文VUE的官方叫法熬尺，但是其實也可以叫它默認插槽，或者與具名插槽相對粱哼，我們可以叫它匿名插槽揭措。因為它不用設置名稱屬性。
單個插槽可以放置在組件的任意位置绊含，但是就像它的名字一樣躬充，一個組件中只能有一個該類插槽。相對應的以政，具名插槽就可以有很多個伴找，只要名字（名稱屬性）不同就可以了疆瑰。
下面通過一個例子來展示昙啄。
父組件：
<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>
注：所有demo都加了樣式，以方便觀察巷屿。其中嘱巾，父組件以灰色背景填充，子組件都以淺藍色填充栽渴。
具名插槽
匿名插槽沒有名稱屬性闲擦，所以是匿名插槽，那么墅冷，插槽加了名稱屬性寞忿，就變成了具名插槽顶岸。具名插槽可以在一個組件中出現(xià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模板上的槽屬性關聯(lián)具名插槽救氯。沒有槽屬性的HTML模板默認關聯(lián)匿名插槽着憨。
作用域插槽
我們的作用域插槽务嫡。這個稍微難理解一點漆改。官方叫它作用域插槽挫剑，實際上樊破，對比前面兩種插槽唆铐，我們可以叫它帶數(shù)據(jù)的插槽艾岂。什么意思呢，就是前面兩種脆炎，都是在組件的模板里面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求秒裕，在槽上面綁定數(shù)據(jù)簇爆。也就是你得寫成大概下面這個樣子爽撒。
<slot name="up":data="data"></slot>
????export default {
????????data:function(){
????????????return{
????????????????data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
????????????}
????????}
}
我們前面說了硕勿，插槽最后顯示不顯示是看父組件有沒有在孩子下面寫模板源武，像下面那樣想幻。
<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ù)的前提下）谍咆。
下面的例子，你就能看到私股，父組件提供了三種樣式（分別是柔性摹察，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>
????<h3>這里是子組件</h3>
// 作用域插槽
</div>
</template>
export default {
????data:function(){
????????return{
????????????data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
????????}
????}
}
