vue中關(guān)于插槽的文檔說明很短，語言又寫的很凝練况芒，再加上其和methods惜纸，data，computed等常用選項(xiàng)使用頻率、使用先后上的差別耐版，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生“算了吧祠够，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”粪牲，于是就關(guān)閉了vue說明文檔古瓤。
實(shí)際上，插槽的概念很簡(jiǎn)單腺阳，下面通過分三部分來講落君。這個(gè)部分也是按照vue說明文檔的順序來寫的。
進(jìn)入三部分之前亭引，先讓還沒接觸過插槽的同學(xué)對(duì)什么是插槽有一個(gè)簡(jiǎn)單的概念：插槽绎速，也就是slot，是組件的一塊HTML模板焙蚓，這塊模板顯示不顯示纹冤、以及怎樣顯示由父組件來決定。 實(shí)際上主届，一個(gè)slot最核心的兩個(gè)問題這里就點(diǎn)出來了赵哲，是顯示不顯示和怎樣顯示。
由于插槽是一塊模板君丁，所以枫夺，對(duì)于任何一個(gè)組件，從模板種類的角度來分绘闷，其實(shí)都可以分為非插槽模板和插槽模板兩大類橡庞。
非插槽模板指的是html模板，指的是‘div印蔗、span扒最、ul、table’這些华嘹，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制吧趣；插槽模板是slot，它是一個(gè)空殼子耙厚，因?yàn)樗@示與隱藏以及最后用什么樣的html模板顯示由父組件控制强挫。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊薛躬，父組件傳過來的模板將來就顯示在哪塊俯渤。
單個(gè)插槽 | 默認(rèn)插槽 | 匿名插槽
首先是單個(gè)插槽，單個(gè)插槽是vue的官方叫法型宝，但是其實(shí)也可以叫它默認(rèn)插槽八匠，或者與具名插槽相對(duì)絮爷，我們可以叫它匿名插槽。因?yàn)樗挥迷O(shè)置name屬性梨树。
單個(gè)插槽可以放置在組件的任意位置坑夯，但是就像它的名字一樣，一個(gè)組件中只能有一個(gè)該類插槽劝萤。相對(duì)應(yīng)的渊涝，具名插槽就可以有很多個(gè)，只要名字（name屬性）不同就可以了床嫌。
下面通過一個(gè)例子來展示跨释。
父組件：
<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>里面寫了html模板厌处，那么子組件的匿名插槽這塊模板就是下面這樣鳖谈。也就是說，子組件的匿名插槽被使用了阔涉，是被下面這塊模板使用了缆娃。
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
具名插槽
匿名插槽沒有name屬性，所以是匿名插槽瑰排，那么贯要，插槽加了name屬性，就變成了具名插槽椭住。具名插槽可以在一個(gè)組件中出現(xiàn)N次崇渗。出現(xiàn)在不同的位置。下面的例子京郑，就是一個(gè)有兩個(gè)具名插槽和單個(gè)插槽的組件宅广，這三個(gè)插槽被父組件用同一套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模板默認(rèn)關(guān)聯(lián)匿名插槽。
作用域插槽 | 帶數(shù)據(jù)的插槽
最后户魏，就是我們的作用域插槽驶臊。這個(gè)稍微難理解一點(diǎn)。官方叫它作用域插槽叼丑，實(shí)際上资铡，對(duì)比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽幢码。什么意思呢，就是前面兩種尖飞，都是在組件的template里面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求症副，在slot上面綁定數(shù)據(jù)店雅。也就是你得寫成大概下面這個(gè)樣子。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我們前面說了贞铣，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板闹啦，像下面那樣。
<child>
html模板
</child>
寫了辕坝，插槽就總得在瀏覽器上顯示點(diǎn)東西窍奋，東西就是html該有的模樣，沒寫酱畅，插槽就是空殼子琳袄，啥都沒有。
OK纺酸，我們說有html模板的情況窖逗，就是父組件會(huì)往子組件插模板的情況，那到底插一套什么樣的樣式呢餐蔬，這由父組件的html+css共同決定碎紊，但是這套樣式里面的內(nèi)容呢？
正因?yàn)樽饔糜虿宀劢壎艘惶讛?shù)據(jù)樊诺，父組件可以拿來用仗考。于是，情況就變成了這樣：樣式父組件說了算词爬，但內(nèi)容可以顯示子組件插槽綁定的秃嗜。
我們?cè)賮韺?duì)比，作用域插槽和單個(gè)插槽和具名插槽的區(qū)別缸夹，因?yàn)閱蝹€(gè)插槽和具名插槽不綁定數(shù)據(jù)痪寻，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中虽惭，你看到的文字橡类，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容芽唇；而作用域插槽顾画，父組件只需要提供一套樣式（在確實(shí)用作用域插槽綁定的數(shù)據(jù)的前提下）。
下面的例子匆笤，你就能看到研侣，父組件提供了三種樣式(分別是flex、ul炮捧、直接顯示)庶诡，都沒有提供數(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']
}
}
}
