Vue 中插槽(Slot)用法大全
更新時間：2025年10月28日 14:43:31 作者：Slow菜鳥
本文給大家介紹Vue中插槽(Slot)用法,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
（一）插槽用法概念
在Vue中，子組件的模板可以定義多個插槽（包括默認插槽和具名插槽等等），而父組件在引用子組件時，可以根據(jù)需要 有選擇性的為這些插槽插入內(nèi)容。
如果父組件沒有為某個插槽提供內(nèi)容，那么子組件的模板中該插槽的位置將顯示為該插槽的默認內(nèi)容（如果有的話），或者簡單地留空。
（二）插槽的基本類型
1. 默認插槽（Default Slot）
- 定義：沒有指定名稱的插槽，用于接收父組件傳遞的未明確指定插槽名稱的內(nèi)容。
- 用法：在子組件中使用
<slot></slot>定義默認插槽的位置，父組件中直接放在子組件標簽內(nèi)的內(nèi)容會被渲染到該位置。
舉例說明：
子組件 (DefaultSlotChild.vue)
<template>
<div class="child">
<h2>我是子組件的標題</h2>
<!-- 默認插槽 -->
<slot></slot>
</div>
</template>父組件
<template>
<div>
<DefaultSlotChild>
<!-- 這里的內(nèi)容會被渲染到子組件的默認插槽中 -->
<p>這是來自父組件的默認插槽內(nèi)容。111</p>
<p>這是來自父組件的默認插槽內(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>我是子組件的標題</h2>
<!-- 這里的內(nèi)容會被渲染到子組件的默認插槽中 -->
<p>這是來自父組件的默認插槽內(nèi)容。111</p>
<p>這是來自父組件的默認插槽內(nèi)容。222</p>
</div>
</template>
<!-- 以上內(nèi)容是子組件中的內(nèi)容 end-->
</div>
</template>2. 具名插槽（Named Slots）
- 定義：帶有名稱的插槽，用于接收父組件中明確指定插槽名稱的內(nèi)容。
- 用法：在子組件中使用
<slot name="插槽名稱"></slot>定義具名插槽，父組件中通過<template v-slot:插槽名稱>或簡寫為<template #插槽名稱>來指定內(nèi)容應(yīng)該插入哪個具名插槽。
舉例說明：
子組件 (NamedSlotChild.vue)
<template>
<div class="child">
<header>
<!-- 具名插槽：header -->
<slot name="header"></slot>
</header>
<main>
<!-- 默認插槽 -->
<slot></slot>
</main>
<footer>
<!-- 具名插槽：footer -->
<slot name="footer"></slot>
</footer>
</div>
</template>父組件
<template>
<NamedSlotChild>
<template v-slot:header>
<!-- 這里的內(nèi)容會被渲染到子組件的header插槽中 -->
<h1>這是標題</h1>
</template>
<p>這是默認插槽的內(nèi)容。</p>
<template v-slot:footer>
<!-- 這里的內(nèi)容會被渲染到子組件的footer插槽中 -->
<p>這是頁腳</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. 動態(tài)插槽名（Dynamic Slot Names）
- 定義：允許插槽的名稱是動態(tài)的，根據(jù)組件的狀態(tài)或其他條件來決定使用哪個插槽。
- 用法：在父組件中，通過
:slot="動態(tài)名稱"來綁定插槽的名稱，其中動態(tài)名稱可以是一個計算屬性、方法返回值或數(shù)據(jù)屬性。
舉例說明：
這個例子稍微復(fù)雜一些，因為它通常用于更高級的場景，比如根據(jù)條件動態(tài)渲染不同的插槽。但基本思想是使用計算屬性或方法來返回插槽名。
子組件（與前面的例子類似，不需要特別修改）
父組件（簡化示例）
<template>
<div>
<NamedSlotChild>
<!-- 使用計算屬性dynamicSlotName來決定內(nèi)容應(yīng)該渲染到哪個插槽中 -->
<template v-slot:[dynamicSlotName]>
<p>這是根據(jù)條件動態(tài)插入到對應(yīng)插槽的內(nèi)容。</p>
</template>
</NamedSlotChild>
</div>
</template>
<script>
import NamedSlotChild from './NamedSlotChild.vue';
export default {
components: {
NamedSlotChild
},
computed: {
// 假設(shè)這里根據(jù)某個條件返回不同的插槽名
dynamicSlotName() {
// 示例：根據(jù)某個數(shù)據(jù)屬性來決定
const someCondition = true; // 實際應(yīng)用中這里可能是更復(fù)雜的邏輯或響應(yīng)式數(shù)據(jù)
if (someCondition) {
return 'header';
} else {
return 'footer';
}
}
}
}
</script>5. 插槽后備內(nèi)容（Slot Fallback Content）
- 定義：當父組件沒有為插槽提供內(nèi)容時，子組件可以定義一些后備內(nèi)容作為默認顯示。
- 用法：在子組件的
<slot>標簽內(nèi)部直接放置的內(nèi)容，如果父組件沒有為該插槽提供內(nèi)容，則顯示這些后備內(nèi)容。
子組件 (SlotFallbackChild.vue)
<template>
<div>
<slot>
<!-- 后備內(nèi)容：如果沒有提供插槽內(nèi)容，則顯示這個 -->
<p>如果沒有提供內(nèi)容，將顯示這段后備文本。</p>
</slot>
</div>
</template>父組件
<template>
<div>
<!-- 提供了插槽內(nèi)容，所以后備內(nèi)容不會顯示 -->
<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后的比對
在Vue 2.6.0及以后的版本中，Vue團隊對插槽（slot）的語法進行了簡化和改進，引入了v-slot指令來替代原有的slot和slot-scope語法
6.1 默認插槽 縮寫（由不寫變成v-slot）
父組件 <child-component><p>這是默認插槽的內(nèi)容</p></child-component> 子組件 <template><slot></slot></template>
縮寫后變成
父組件（推薦使用<template>標簽，但也可直接用于元素上） <child-component> <template v-slot><p>這是默認插槽的內(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>這是頭部內(nèi)容</h1></template> <template slot="footer"><p>這是底部內(nèi)容</p></template> </child-component> 子組件 <template> <slot name="header"></slot> <slot name="footer"></slot> </template>
縮寫后變成
父組件 <child-component> <template v-slot:header><h1>這是頭部內(nèi)容</h1></template> <template v-slot:footer><p>這是底部內(nèi)容</p></template> </child-component> 或簡寫 <child-component> <template #header><h1>這是頭部內(nèi)容</h1></template> <template #footer><p>這是底部內(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>
或簡寫
<child-component>
<template #item="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>
子組件不變
<template>
<slot name="item" :text="itemText"></slot>
</template>
（三）插槽中數(shù)據(jù)傳遞方式
通過
作用域插槽實現(xiàn)
子組件中的插槽如何傳遞給父組件用
舉例
<!-- 子組件中 將someFormObject這個對象作為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中非常重要的一個概念，它允許父組件向子組件的模板中插入內(nèi)容，從而實現(xiàn)組件內(nèi)容的分發(fā)和組合。
通過默認插槽、具名插槽、作用域插槽、動態(tài)插槽名、插槽后備內(nèi)容以及插槽的簡寫語法等用法，Vue.js提供了靈活且強大的組件化解決方案。這些用法不僅提高了組件的復(fù)用性和靈活性，還降低了組件之間的耦合度，使得Vue.js應(yīng)用更加易于開發(fā)和維護。
在實際開發(fā)中，根據(jù)具體的需求和場景選擇合適的插槽用法，可以構(gòu)建出高效、可維護的Vue.js應(yīng)用。
到此這篇關(guān)于Vue 中插槽(Slot)用法大全的文章就介紹到這了,更多相關(guān)vue 插槽slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue elementUI table表格數(shù)據(jù) 滾動懶加載的實現(xiàn)方法
這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動懶加載的實現(xiàn)方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
electron-vue?運行報錯?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個靜態(tài)方法，用于將鍵值對列表（如數(shù)組）轉(zhuǎn)換為對象，如果在當前環(huán)境中不支持該方法，可以使用?polyfill?來提供類似功能，接下來通過本文介紹electron-vue?運行報錯?Object.fromEntries?is?not?a?function的解決方案2023-05-05
Vue3響應(yīng)式對象是如何實現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對象是如何實現(xiàn)的，文章圍繞主題展開詳細的內(nèi)容介紹具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
vue.js中created()與activated()的個人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個人使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue使用swiper插件實現(xiàn)輪播圖的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了解決vue scoped scss 無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-06-06
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09