什么是插槽

slot 【插槽】， 是 Vue 的內(nèi)容分發(fā)機(jī)制， 組件內(nèi)部的模板引擎使用slot 元素作為承載分發(fā)內(nèi)容的出口。slot 是子組件的一個(gè)模板標(biāo)簽元素， 而這一個(gè)標(biāo)簽元素是否顯示， 以及怎么顯示是由父組件決定的。

VUE中slot【插槽】的分類與應(yīng)用

插槽有三種：默認(rèn)插槽、具名插槽、作用域插槽。

（1）默認(rèn)插槽

語(yǔ)法：<slot></slot>

示例：

在子組件中定義一個(gè)默認(rèn)插槽

<template><div><h2>{{ title }}</h2><slot></slot></div>
</template>

在開(kāi)發(fā)中我們經(jīng)常使用到組件之間的傳值，但很多情況涉及到的都是數(shù)據(jù)屬性的傳值，現(xiàn)在如果是這種情況：想讓父組件定義的 p 標(biāo)簽傳給子組件并顯示，可以在子組件中定義一個(gè)默認(rèn)插槽

<template><div class="about"><h1>This is an Parent page</h1><children><!-- 一個(gè)p標(biāo)簽的dom結(jié)構(gòu) --><p>子組件標(biāo)簽之間</p></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>

?展示效果

（2）具名卡槽?

在子組件中定義插槽時(shí)，給對(duì)應(yīng)的插槽分別起個(gè)名字，方便后邊插入父組件將根據(jù) name 來(lái)填充對(duì)應(yīng)的內(nèi)容。這種有name屬性的卡槽就是具名卡槽。

為具名插槽提供內(nèi)容：

在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè)?<template>?元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式指定元素需要放在哪個(gè)插槽中。

【語(yǔ)法】<template v-slot:插槽的name> 需要向插槽中放入的內(nèi)容 </template>

具名插槽的簡(jiǎn)寫形式：

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符?#。例如?v-slot:header可以被重寫為?#header

【語(yǔ)法】<template #插槽的name> 需要向插槽中放入的內(nèi)容 </template>

【注】

• 使用 v-slot 指令指定元素放在哪個(gè)插槽中，必須配合<template>?元素，且一個(gè)<template>?元素只能對(duì)應(yīng)一個(gè)預(yù)留的插槽，即不能多個(gè)<template>?元素都使用 v-slot 指令指定相同的插槽。
• 在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了?slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。
• 使用 slot 屬性指定元素放置的插槽：slot="插槽的name"，slot 屬性可以直接寫在元素標(biāo)簽上，即 slot 屬性不用必須與<template> 元素配合，且不同的標(biāo)簽可以使用 slot 屬性指定相同的插槽，使用 slot 屬性指定了相同的插槽都會(huì)被放入一個(gè)插槽中，后面的元素會(huì)被追加在前面放入插槽的元素后。

示例：

在子組件中，定義兩個(gè)具名插槽：

<template><div><h3>Com 組件</h3><slot name="header"></slot><slot name="bottom"></slot></div>
</template><script>
export default {name: 'Com'
}
</script>

父組件示例代碼

<template><div><h1>App 組件</h1><Com><!-- 指定需要向子組件的插槽區(qū)域放入的元素 --><!-- 需要放入插槽的元素寫在組件標(biāo)簽內(nèi) --><!-- <div>插槽的內(nèi)容</div> --><template v-slot:header><div>頭部區(qū)域</div></template><template v-slot:default><div>默認(rèn)區(qū)域</div></template><template v-slot:bottom><div>bottom區(qū)域</div></template></Com></div>
</template>
<script>
import Com from './Com.vue'
export default {name: 'App',components: { Com }
}
</script>

（3）作用域插槽?

在封裝組件的過(guò)程中，可以為預(yù)留的<slot>?插槽綁定 props 數(shù)據(jù)，這種帶有 props 數(shù)據(jù)的<slot>?叫做“作用域插槽”。

作用域插槽，要顯示的數(shù)據(jù)已經(jīng)在組件中，以什么樣的樣式顯示數(shù)據(jù)(用什么標(biāo)簽和標(biāo)簽的樣式)，可以由組件的使用者進(jìn)行指定

【語(yǔ)法】<slot :自定義的name=data中的屬性或?qū)ο?gt;</slot>

注：為作用域插槽指定插槽內(nèi)的元素必須使用?<template>?標(biāo)簽。

獲取插槽綁定 props 數(shù)據(jù)的方法：
1.scope="接收的變量名"：<template scope="接收的變量名">
2.slot-scope="接收的變量名"：<template slot-scope="接收的變量名">
3.v-slot:插槽名="接收的變量名"：<template v-slot:插槽名="接收的變量名">

子組件示例

<template><div><h3>Com 組件</h3><!-- 為組件的使用者預(yù)留的區(qū)域 --><!-- :infomation="info" 未來(lái)要進(jìn)行渲染在插槽位置的數(shù)據(jù) --><!-- 怎么樣渲染數(shù)據(jù)由組件的使用者決定 --><slot :infomation="info" :msg="msg"></slot></div>
</template><script>
export default {name: 'Com',data() {return {info: { name: 'zs', age: 23 },msg: 'hello vue'}}
}
</script>

父組件示例

<template><div><h1>App 組件</h1><Com><!-- 指定需要向子組件的插槽區(qū)域放入的元素 --><!-- 需要放入插槽的元素寫在組件標(biāo)簽內(nèi) --><!-- val 接收組件中要在插槽位置渲染的數(shù)據(jù) --><!-- val 組件通過(guò) props 向插槽中傳入的數(shù)據(jù) --><template #default="val"> {{ val }} </template></Com></div>
</template><script>
import Com from './Com.vue'export default {name: 'App',components: { Com }
}
</script>

此文章借鑒了一下博主的優(yōu)秀文章：

原文鏈接