（一）前言
【MDN】HTML
<slot>元素 ，作為 Web Components 技術(shù)套件的一部分，是Web組件內(nèi)的一個(gè)占位符。該占位符可以在后期使用自己的標(biāo)記語言填充，這樣您就可以創(chuàng)建單獨(dú)的DOM樹，并將它與其它的組件組合在一起。
Vue 代碼中的 slot 是什么，簡單來說就是插槽。<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插
槽，傳入內(nèi)容后 <slot> 元素自身將被替換。
（二）插槽分類及使用
插槽分為三種：默認(rèn)插槽、具名插槽以及作用域插槽。
- 默認(rèn)插槽
# 定義插槽, child.vue
<template>
<slot>默認(rèn)內(nèi)容</slot>
</template>
#使用 parent.vue
<template>
<child>
<template>My Content...</template>
</child>
</template>
<!-- 獨(dú)占默認(rèn)插槽的縮寫 -->
<child>
<template #default="slotProps"></template>
</child>
- 具名插槽: 顧名思義，就是給插槽起一個(gè)名字，方便區(qū)分和使用。
# 定義具名插槽，命名為 content
<template>
<slot name="content">默認(rèn)內(nèi)容</slot>
</template>
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即
v-slot指令)。它取代了slot和slot-scope這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱這份 RFC。
- 作用域插槽:
# 定義作用域插槽，命名為 content
<template>
<slot name="content" :user="user" :getUserName="getUserName">默認(rèn)內(nèi)容</slot>
</template>
<script>
export default {
data() {
user: {name: ''}
}
methods: {
getUserName() {
console.log(this.user.name);
}
}
}
</script>
v-slot的縮寫是#，但是如果使用#的話，必須始終使用具插槽來代替
<template #default="slotProps"></template>
