什么是插槽恭取？
在vue中通過(guò)slot可以向組件中指定位置插入內(nèi)容困曙。
正常情況下調(diào)用一個(gè)組件<com-form></com-form>的時(shí)候咽筋，組件顯示的內(nèi)容為com-input組件中模板的內(nèi)容油挥」嘶迹可是想在調(diào)用組件的時(shí)候給組件添加內(nèi)容自娩，該怎么辦呢用踩？
//父組件
<com-form>
<span>我是插槽內(nèi)容</span>
</com-form>
//子組件com-form
<templete>
<div>
我是組件內(nèi)容
<slot></slot>
</div>
</templete>
//顯示---我是組件內(nèi)容 我是插槽內(nèi)容
插槽的通俗理解就是是“占坑”，在組件模板中占好了位置忙迁，當(dāng)使用該組件標(biāo)簽時(shí)候脐彩，組件標(biāo)簽里面的內(nèi)容就會(huì)自動(dòng)填坑（替換組件模板中<slot>位置），當(dāng)插槽也就是坑<slot name=”mySlot”>有命名時(shí)姊扔，組件標(biāo)簽中使用屬性slot=”mySlot”的元素就會(huì)替換該對(duì)應(yīng)位置內(nèi)容惠奸。
一、單個(gè)插槽/默認(rèn)插槽/匿名插槽
首先是單個(gè)插槽恰梢，單個(gè)插槽是vue的官方叫法佛南，但是其實(shí)也可以叫它默認(rèn)插槽，或者與具名插槽相對(duì)嵌言，我們可以叫它匿名插槽嗅回。因?yàn)樗挥迷O(shè)置name屬性。
單個(gè)插槽可以放在組件任意位置摧茴，但是一個(gè)組件有且只能有一個(gè)單個(gè)插槽绵载，相對(duì)應(yīng)的，具名插槽就可以有很多個(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>
二娃豹、具名插槽
匿名插槽沒(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>
三倡鲸、作用域插槽
匿名插槽和具名插槽都是在父組件中定義內(nèi)容與樣式，子組件只是負(fù)責(zé)放在哪黄娘。但是如果子組件提供數(shù)據(jù)峭状，那這樣的話(huà)需要子組件的<slot>把數(shù)據(jù)傳遞給父組件克滴，父組件只需要提供樣式即可。
子組件child
<template>
<div class="child">
<h3>這里是子組件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
父組件
<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>
四优床、v-slot
在 2.6.0 中劝赔，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute胆敞。
// 根組件
<template>
<div>
<mo>
<template v-slot:header="slotProps">
<h1>{{slotProps.header + ' ' + msg}}</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</mo>
</div>
</template>
<script>
import mo from './module.vue'
export default {
components: {
mo
},
data() {
return {
msg: '這是根組件的消息'
}
}
}
</script>
// 子組件
<template>
<div>
--header start--
<header>
<slot name="header" :header="header"></slot>
</header>
--header over--
<div></div>
--default start--
<slot></slot>
--default over--
<div></div>
--footer start--
<footer>
<slot name="footer"></slot>
</footer>
--dooter over--
</div>
</template>
<script>
export default {
data() {
return {
header: '來(lái)自子組件的頭部消息'
}
}
}
</script>
<style scoped>
</style>
