Vue 中插槽(Slot)用法大全
更新時(shí)間：2025年10月28日 14:43:31 作者：Slow菜鳥
本文給大家介紹Vue中插槽(Slot)用法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
（一）插槽用法概念
在Vue中，子組件的模板可以定義多個(gè)插槽（包括默認(rèn)插槽和具名插槽等等），而父組件在引用子組件時(shí)，可以根據(jù)需要 有選擇性的為這些插槽插入內(nèi)容。
如果父組件沒有為某個(gè)插槽提供內(nèi)容，那么子組件的模板中該插槽的位置將顯示為該插槽的默認(rèn)內(nèi)容（如果有的話），或者簡(jiǎn)單地留空。
（二）插槽的基本類型
1. 默認(rèn)插槽（Default Slot）
- 定義：沒有指定名稱的插槽，用于接收父組件傳遞的未明確指定插槽名稱的內(nèi)容。
- 用法：在子組件中使用
<slot></slot>定義默認(rèn)插槽的位置，父組件中直接放在子組件標(biāo)簽內(nèi)的內(nèi)容會(huì)被渲染到該位置。
舉例說明：
子組件 (DefaultSlotChild.vue)
<template>
<div class="child">
<h2>我是子組件的標(biāo)題</h2>
<!-- 默認(rèn)插槽 -->
<slot></slot>
</div>
</template>父組件
<template>
<div>
<DefaultSlotChild>
<!-- 這里的內(nèi)容會(huì)被渲染到子組件的默認(rèn)插槽中 -->
<p>這是來自父組件的默認(rèn)插槽內(nèi)容。111</p>
<p>這是來自父組件的默認(rèn)插槽內(nèi)容。222</p>
</DefaultSlotChild>
</div>
</template>
<script>
import DefaultSlotChild from './DefaultSlotChild.vue';
export default {
components: {
DefaultSlotChild
}
}
</script>父組件上最終效果
<template>
<div>
<!-- 以下內(nèi)容是子組件中的內(nèi)容 begin-->
<template>
<div class="child">
<h2>我是子組件的標(biāo)題</h2>
<!-- 這里的內(nèi)容會(huì)被渲染到子組件的默認(rèn)插槽中 -->
<p>這是來自父組件的默認(rèn)插槽內(nèi)容。111</p>
<p>這是來自父組件的默認(rèn)插槽內(nèi)容。222</p>
</div>
</template>
<!-- 以上內(nèi)容是子組件中的內(nèi)容 end-->
</div>
</template>2. 具名插槽（Named Slots）
- 定義：帶有名稱的插槽，用于接收父組件中明確指定插槽名稱的內(nèi)容。
- 用法：在子組件中使用
<slot name="插槽名稱"></slot>定義具名插槽，父組件中通過<template v-slot:插槽名稱>或簡(jiǎn)寫為<template #插槽名稱>來指定內(nèi)容應(yīng)該插入哪個(gè)具名插槽。
舉例說明：
子組件 (NamedSlotChild.vue)
<template>
<div class="child">
<header>
<!-- 具名插槽：header -->
<slot name="header"></slot>
</header>
<main>
<!-- 默認(rèn)插槽 -->
<slot></slot>
</main>
<footer>
<!-- 具名插槽：footer -->
<slot name="footer"></slot>
</footer>
</div>
</template>父組件
<template>
<NamedSlotChild>
<template v-slot:header>
<!-- 這里的內(nèi)容會(huì)被渲染到子組件的header插槽中 -->
<h1>這是標(biāo)題</h1>
</template>
<p>這是默認(rèn)插槽的內(nèi)容。</p>
<template v-slot:footer>
<!-- 這里的內(nèi)容會(huì)被渲染到子組件的footer插槽中 -->
<p>這是頁(yè)腳</p>
</template>
</NamedSlotChild>
</template>
<script>
import NamedSlotChild from './NamedSlotChild.vue';
export default {
components: {
NamedSlotChild
}
}
</script>3. 作用域插槽（Scoped Slots）
- 定義：一種特殊的插槽，允許子組件將數(shù)據(jù)暴露給父組件的插槽內(nèi)容。
- 用法：
在子組件中，通過<slot :數(shù)據(jù)名="數(shù)據(jù)值"></slot>將數(shù)據(jù)傳遞給插槽；
在父組件中，通過<template v-slot:插槽名稱="slotProps">接收數(shù)據(jù)，并使用slotProps來訪問傳遞過來的數(shù)據(jù)。
舉例說明
子組件 (ScopedSlotChild.vue)
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot name="item" :item="item">
<!-- 后備內(nèi)容 -->
{{ item.text }}
</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '蘋果' },
{ id: 2, text: '香蕉' },
{ id: 3, text: '橙子' }
]
}
}
}
</script>父組件
<template>
<ScopedSlotChild>
<template v-slot:item="slotProps">
<!-- 使用slotProps訪問子組件傳遞的數(shù)據(jù) -->
<strong>{{ slotProps.item.text }}</strong>
</template>
</ScopedSlotChild>
</template>
<script>
import ScopedSlotChild from './ScopedSlotChild.vue';
export default {
components: {
ScopedSlotChild
}
}
</script>4. 動(dòng)態(tài)插槽名（Dynamic Slot Names）
- 定義：允許插槽的名稱是動(dòng)態(tài)的，根據(jù)組件的狀態(tài)或其他條件來決定使用哪個(gè)插槽。
- 用法：在父組件中，通過
:slot="動(dòng)態(tài)名稱"來綁定插槽的名稱，其中動(dòng)態(tài)名稱可以是一個(gè)計(jì)算屬性、方法返回值或數(shù)據(jù)屬性。
舉例說明：
這個(gè)例子稍微復(fù)雜一些，因?yàn)樗ǔＳ糜诟呒?jí)的場(chǎng)景，比如根據(jù)條件動(dòng)態(tài)渲染不同的插槽。但基本思想是使用計(jì)算屬性或方法來返回插槽名。
子組件（與前面的例子類似，不需要特別修改）
父組件（簡(jiǎn)化示例）
<template>
<div>
<NamedSlotChild>
<!-- 使用計(jì)算屬性dynamicSlotName來決定內(nèi)容應(yīng)該渲染到哪個(gè)插槽中 -->
<template v-slot:[dynamicSlotName]>
<p>這是根據(jù)條件動(dòng)態(tài)插入到對(duì)應(yīng)插槽的內(nèi)容。</p>
</template>
</NamedSlotChild>
</div>
</template>
<script>
import NamedSlotChild from './NamedSlotChild.vue';
export default {
components: {
NamedSlotChild
},
computed: {
// 假設(shè)這里根據(jù)某個(gè)條件返回不同的插槽名
dynamicSlotName() {
// 示例：根據(jù)某個(gè)數(shù)據(jù)屬性來決定
const someCondition = true; // 實(shí)際應(yīng)用中這里可能是更復(fù)雜的邏輯或響應(yīng)式數(shù)據(jù)
if (someCondition) {
return 'header';
} else {
return 'footer';
}
}
}
}
</script>5. 插槽后備內(nèi)容（Slot Fallback Content）
- 定義：當(dāng)父組件沒有為插槽提供內(nèi)容時(shí)，子組件可以定義一些后備內(nèi)容作為默認(rèn)顯示。
- 用法：在子組件的
<slot>標(biāo)簽內(nèi)部直接放置的內(nèi)容，如果父組件沒有為該插槽提供內(nèi)容，則顯示這些后備內(nèi)容。
子組件 (SlotFallbackChild.vue)
<template>
<div>
<slot>
<!-- 后備內(nèi)容：如果沒有提供插槽內(nèi)容，則顯示這個(gè) -->
<p>如果沒有提供內(nèi)容，將顯示這段后備文本。</p>
</slot>
</div>
</template>父組件
<template>
<div>
<!-- 提供了插槽內(nèi)容，所以后備內(nèi)容不會(huì)顯示 -->
<SlotFallbackChild>
<p>這是來自父組件的插槽內(nèi)容。</p>
</SlotFallbackChild>
<!-- 沒有提供插槽內(nèi)容，將顯示后備內(nèi)容 -->
<SlotFallbackChild></SlotFallbackChild>
</div>
</template>
<script>
import SlotFallbackChild from './SlotFallbackChild.vue';
export default {
components: {
SlotFallbackChild
}
}
</script>6. Vue 2.6.0之前與Vue 2.6.0后的比對(duì)
在Vue 2.6.0及以后的版本中，Vue團(tuán)隊(duì)對(duì)插槽（slot）的語法進(jìn)行了簡(jiǎn)化和改進(jìn)，引入了v-slot指令來替代原有的slot和slot-scope語法
6.1 默認(rèn)插槽 縮寫（由不寫變成v-slot）
父組件 <child-component><p>這是默認(rèn)插槽的內(nèi)容</p></child-component> 子組件 <template><slot></slot></template>
縮寫后變成
父組件（推薦使用<template>標(biāo)簽，但也可直接用于元素上） <child-component> <template v-slot><p>這是默認(rèn)插槽的內(nèi)容</p></template> </child-component> 或（注意：直接在元素上使用v-slot較少見，且可能需要額外配置） <child-component> <p v-slot></p> </child-component> 子組件不變 <template><slot></slot></template>
6.2 具名插槽 縮寫 （由slot變成 v-slot）
父組件 <child-component> <template slot="header"><h1>這是頭部?jī)?nèi)容</h1></template> <template slot="footer"><p>這是底部?jī)?nèi)容</p></template> </child-component> 子組件 <template> <slot name="header"></slot> <slot name="footer"></slot> </template>
縮寫后變成
父組件 <child-component> <template v-slot:header><h1>這是頭部?jī)?nèi)容</h1></template> <template v-slot:footer><p>這是底部?jī)?nèi)容</p></template> </child-component> 或簡(jiǎn)寫 <child-component> <template #header><h1>這是頭部?jī)?nèi)容</h1></template> <template #footer><p>這是底部?jī)?nèi)容</p></template> </child-component> 子組件不變 <template> <slot name="header"></slot> <slot name="footer"></slot> </template>
6.3 作用域插槽 縮寫 （由slot變成 v-slot）
父組件
<child-component>
<template slot="item" slot-scope="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>
子組件
<template>
<slot name="item" :text="itemText"></slot>
</template>
縮寫后變成
父組件
<child-component>
<template v-slot:item="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>
或簡(jiǎn)寫
<child-component>
<template #item="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>
子組件不變
<template>
<slot name="item" :text="itemText"></slot>
</template>
（三）插槽中數(shù)據(jù)傳遞方式
通過
作用域插槽實(shí)現(xiàn)
子組件中的插槽如何傳遞給父組件用
舉例
<!-- 子組件中 將someFormObject這個(gè)對(duì)象作為form屬性傳遞給插槽-->
<slot name="form" :form="someFormObject">...</slot>
<!-- 父組件中 使用 slot-scope 屬性 來接收form屬性 -->
<template slot="form" slot-scope="{ form }">
<!-- 2.6 版后縮寫 語法為 v-slot:插槽名稱="{ 屬性名稱}" -->
<template v-slot:form="{ form }"> </template>
歸納
插槽是Vue.js中非常重要的一個(gè)概念，它允許父組件向子組件的模板中插入內(nèi)容，從而實(shí)現(xiàn)組件內(nèi)容的分發(fā)和組合。
通過默認(rèn)插槽、具名插槽、作用域插槽、動(dòng)態(tài)插槽名、插槽后備內(nèi)容以及插槽的簡(jiǎn)寫語法等用法，Vue.js提供了靈活且強(qiáng)大的組件化解決方案。這些用法不僅提高了組件的復(fù)用性和靈活性，還降低了組件之間的耦合度，使得Vue.js應(yīng)用更加易于開發(fā)和維護(hù)。
在實(shí)際開發(fā)中，根據(jù)具體的需求和場(chǎng)景選擇合適的插槽用法，可以構(gòu)建出高效、可維護(hù)的Vue.js應(yīng)用。
到此這篇關(guān)于Vue 中插槽(Slot)用法大全的文章就介紹到這了,更多相關(guān)vue 插槽slot內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
如何使用 Deepseek 寫的uniapp油耗計(jì)算器
這篇文章主要介紹了如何使用 Deepseek 寫的uniapp油耗計(jì)算器,下面是一個(gè)基于 Uniapp 的油耗計(jì)算器實(shí)現(xiàn),包含 Vue 組件和頁(yè)面代碼,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue?如何根據(jù)條件判斷屬性的添加和去除，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
前端Vue3+vant實(shí)現(xiàn)OSS上傳圖片全過程
這篇文章主要介紹了前端Vue3+vant實(shí)現(xiàn)OSS上傳圖片的相關(guān)資料,文中通過示例代碼詳細(xì)說明了上傳文件的總流程,包括可能出現(xiàn)的跨域問題以及如何配置服務(wù)器以解決跨域問題,需要的朋友可以參考下2025-05-05
淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下2023-09-09
Vue3 Vant組件庫(kù)使用過程中的避坑點(diǎn)
本片文章主要寫了，Vue3開發(fā)時(shí)運(yùn)用Vant UI庫(kù)的一些避坑點(diǎn)。讓有問題的小伙伴可以快速了解是為什么。也是給自己做一個(gè)記錄2023-04-04
利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue項(xiàng)目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
這篇文章主要介紹了vue項(xiàng)目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個(gè)接口，根據(jù)第一個(gè)驗(yàn)證接口返回的code，彈不同的框，點(diǎn)擊彈框確認(rèn)再掉第二個(gè)接口，需要的朋友可以參考下2022-12-12
VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路
這篇文章主要為大家介紹了VUE使用canvas繪制管線管廊實(shí)現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04