噓冤今，多看圖少看文
釋義
slot, 解釋為插槽纽甘，它是組件的一塊 HTML模板鱼鼓，而這塊模板 顯示與否 以及 如何顯示钉跷，取決于父組件灶伊。
props 可以從 父組件 向 子組件 傳遞 數(shù)據(jù);
slot 可以從 父組件 向 子組件 傳遞 html疆前。
顯示與否
- 子組件至少包含一個slot插槽，否則父組件的的內(nèi)容不會被展示聘萨；
查看源碼 - 如果子組件包含slot插槽
插槽顯示的位置 由子組件自身決定翘贮，slot寫在組件template的什么位置赊窥，父組件傳過來的模板將來就顯示在什么位置。
那么如何顯示呢
插槽可分為單個插槽狸页、具名插槽和作用域插槽锨能。
單個插槽
顧名思義，一個組件中只能有一個單個插槽芍耘。
上面的三個源碼中的slot址遇，都是 單個插槽。單個插槽沒有 name 屬性齿穗。
具名插槽
- 具名插槽傲隶，比單個插槽，多了個 name 屬性窃页。
- 具名插槽 將匹配內(nèi)容片段中有對應(yīng) name 的元素。
- 具名插槽可以在一個組件中出現(xiàn)N次复濒，出現(xiàn)在不同的位置脖卖。出現(xiàn)的位置以子組件內(nèi)的順序為準。
查看源碼
從源碼中巧颈，可以看出畦木，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽。沒有slot屬性的html模板默認關(guān)聯(lián) 單個插槽砸泛。
作用域插槽
作用域插槽十籍，區(qū)別于單個插槽和具名插槽，需要 在slot上綁定數(shù)據(jù)唇礁。
<!--父組件-->
<template>
<div class="father">
<h3>這里是父組件</h3>
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
</template>
<!-- 子組件 -->
<template>
<div class="child">
<h3>這里是子組件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['小明','小紅','小胡','小管']
}
}
}
