Vue中的插槽Slot技術(shù)詳解
一、引言
Vue.js是一款流行的前端框架，提供了強(qiáng)大的組件化功能。其中，插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù)，允許我們在組件中定義一些占位符，然后在使用組件時，通過插槽來傳遞內(nèi)容。插槽的靈活性使得我們可以輕松地定制組件的外觀和行為，可以幫助我們更好地處理組件的可復(fù)用性和靈活性。
二、插槽基礎(chǔ)使用
在Vue中，插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽。
1. 默認(rèn)插槽
默認(rèn)插槽是最簡單的插槽形式，它允許我們將組件的內(nèi)容傳遞到組件內(nèi)部的一個占位符中。在組件的模板中使用定義默認(rèn)插槽，然后在使用組件時，將內(nèi)容傳遞給這個插槽。
// Com01.vue
<template>
<h2>學(xué)習(xí)插槽</h2>
<div>
<slot>我是默認(rèn)插槽，沒給我傳內(nèi)容就會默認(rèn)顯示這句話</slot>
</div>
</template>// 父組件App.vue
<template>
<Com01>
<p>你好，世界!</p>
<!-- <p>你好，世界!</p> -->
</Com01>
</template>
<script setup>
import Com01 from './components/Com01.vue'
</script>
在上面的代碼示例中，<slot></slot>表示一個默認(rèn)插槽，將傳遞給Com01組件的內(nèi)容放置在這個插槽中。如果把p標(biāo)簽?zāi)且恍凶⑨尩?，就會顯示默認(rèn)內(nèi)容。
2. 具名插槽
具名插槽允許我們在組件中定義多個插槽，并且可以根據(jù)插槽的名稱來傳遞內(nèi)容。在組件的模板中使用<slot name="slotName"></slot>定義具名插槽，然后在使用組件時，使用<template v-slot:slotName>或者<template slot="slotName">來傳遞內(nèi)容給指定的插槽。
// 子組件 Com02.vue
<template>
<div>
<slot name="header"></slot>
<div class="content">
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
</template>// 父組件 App.vue
<template>
<Com02>
<template v-slot:header>
<h2>我是頭部內(nèi)容!</h2>
</template>
<h2>你好，世界!</h2>
<template v-slot:footer>
<h2>我是底部內(nèi)容!</h2>
</template>
</Com02>
</template>
<script setup>
import Com02 from './components/Com02.vue'
</script>
3. 作用域插槽
作用域插槽是一種特殊的插槽，它允許我們在插槽內(nèi)部訪問組件實例的數(shù)據(jù)，允許父組件將數(shù)據(jù)傳遞到子組件中，并在子組件中使用。在組件的模板中使用<slot name="slotName" v-bind:slotData="data"></slot>定義作用域插槽，并在使用組件時，使用<template slot="slotName" v-slot="scope">來訪問插槽內(nèi)部的數(shù)據(jù)。
// 子組件 Category.vue
<template>
<div class="category">
<h3>{{title}}分類組件</h3>
<slot :foods="foods" :games="games" :films="films">我是插槽1</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data(){
return {
foods: ["紅燒肉","番茄炒蛋","魚香肉絲"],
games: ["紅色警戒", "穿越火線", "魔獸世界"],
films: ["肖申克的救贖", "火影忍者", "泰坦尼克號"]
}
}
}
</script>// 父組件 App.vue
<template>
<div class="container">
<Category title="食物" >
<template v-slot="scope">
{{ scope }}
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: "App",
components: {Category},
}
</script>
可以看到父組件中拿到的scope就是一個對象，包括了子組件中傳來的三個數(shù)組，我們可以自己選擇展示哪些數(shù)據(jù)。
// 父組件 App.vue
<template>
<div class="container">
<Category title="食物" >
<template v-slot="scope">
<ul>
<li v-for="item in scope.foods">{{ item }}</li>
</ul>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: "App",
components: {Category},
}
</script>
三、插槽的高級用法
1. 具名作用域插槽
具名作用域插槽的工作方式也是類似的，插槽props可以作為v-slot指令的值被訪問到：v-slot:header="props"，也可以直接縮寫成#header="props"，這是縮寫形式。
// 子組件 Category02.vue
<template>
<div class="category">
<h3>{{title}}分類組件</h3>
<slot name="header" :foods="foods" >我是插槽1</slot>
<slot name="center" :games="games" >我是插槽2</slot>
<slot name="footer" :films="films" >我是插槽3</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data(){
return {
foods: ["紅燒肉","番茄炒蛋","魚香肉絲"],
games: ["紅色警戒", "穿越火線", "魔獸世界"],
films: ["肖申克的救贖", "火影忍者", "泰坦尼克號"]
}
}
}
</script>// 父組件 App.vue
<template>
<div class="container">
<Category title="食物游戲電影" >
<template v-slot:header="scope">
<ul>
<li v-for="item in scope.foods">{{ item }}</li>
</ul>
</template>
<template v-slot:center="props">
<ul>
<li v-for="(item,index) in props.games" :key="index">{{ item }}</li>
</ul>
</template>
<template #footer="scope">
<ul slot="center">
<li v-for="(item,index) in scope.films" :key="index">{{ item }}</li>
</ul>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category02.vue'
export default {
name: "App",
components: {Category},
}
</script>
2. 動態(tài)插槽名
動態(tài)插槽是一種動態(tài)地選擇插槽名稱的方式。我們可以根據(jù)組件的狀態(tài)或?qū)傩詠頉Q定使用哪個插槽，可以動態(tài)地決定將內(nèi)容插入到哪個具名插槽中。
// 子組件 Com06.vue
<template>
<div>
<button @click="toggleSlot">切換插槽</button>
<slot :name="currentSlot"></slot>
</div>
</template>
<script>
export default {
data() {
return {
currentSlot: 'default666',
};
},
methods: {
toggleSlot() {
this.currentSlot = this.currentSlot === 'default666' ? 'custom666' : 'default666';
},
},
};
</script>// 父組件 App.vue
<template>
<div>
<Com06>
<template v-slot:default666>
<p>這是默認(rèn)內(nèi)容!</p>
</template>
<template v-slot:custom666>
<p>這是自定義內(nèi)容!</p>
</template>
</Com06>
</div>
</template>
<script>
import Com06 from './components/Com06.vue'
export default {
name: "App",
components: {Com06},
}
</script>我們在組件中添加了一個按鈕，并在按鈕的點擊事件處理程序中切換currentSlot的值。當(dāng)按鈕被點擊時，currentSlot的值會從default切換到custom，或者從custom切換到default，從而實現(xiàn)默認(rèn)內(nèi)容和自定義內(nèi)容的切換。
在父組件中使用這個組件時，可以根據(jù)currentSlot的值來動態(tài)地指定插槽名稱。
3. 插槽內(nèi)容的訪問
可以通過this.$slots訪問到插槽的內(nèi)容。
<template>
<div>
<button @click="toggleSlot">切換插槽</button>
<slot :name="currentSlot"></slot>
</div>
</template>
<script>
export default {
data() {
return {
currentSlot: 'default666',
};
},
methods: {
toggleSlot() {
console.log("this.$slots: ", this.$slots);
console.log("this.$slots.default666: ", this.$slots.default666);
console.log("this.$slots.custom666: ", this.$slots.custom666);
},
},
};
</script>
四、插槽的本質(zhì)
其實從打印結(jié)果可以看出，slot本質(zhì)就是Proxy代理的對象，屬性名就是各個插槽的名字，屬性值就是對應(yīng)的函數(shù)，調(diào)用函數(shù)得到的結(jié)果就是虛擬結(jié)點。
<slot name="slot1"></slot>就相當(dāng)于在調(diào)用屬性名為slot1的函數(shù)，<slot name="slot2" msg="你好世界!"></slot>就相當(dāng)于在調(diào)用屬性名為slot2的函數(shù)，該函數(shù)接收了msg的參數(shù)。
插槽的注意事項
插槽內(nèi)容可以是任意類型，包括HTML、組件等。
默認(rèn)插槽可以不用寫name屬性，具名插槽必須寫name屬性。
作用域插槽傳遞的數(shù)據(jù)可以根據(jù)需要命名。
五、最后的話
插槽技術(shù)是Vue.js中重要的組件化特性之一，為我們提供了靈活的組件化開發(fā)方式，通過合理使用插槽，我們可以輕松地定制和擴(kuò)展組件的功能，使組件的可復(fù)用性和靈活性大大提高。
以上就是Vue中的插槽Slot技術(shù)詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue插槽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了vue中的keep-alive實例代碼，vue實現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue制作Todo List網(wǎng)頁的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
Vue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案
最近小編遇到這樣的問題當(dāng)vue單頁面按F5強(qiáng)刷，數(shù)據(jù)就恢復(fù)初始了，這怎么辦呢？下面小編給大家?guī)砹薞ue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案，感興趣的朋友一起看看吧2018-01-01
Vue中使用JWT進(jìn)行身份認(rèn)證也是一種常見的方式,它能夠更好地保護(hù)用戶的信息,本文主要介紹了Vue開發(fā)中Jwt的使用詳解,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue2組件tree實現(xiàn)無限級樹形菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型詳解(ref、reactive、toRef、及toRefs)
這篇文章主要介紹了Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型(ref、reactive、toRef、以及toRefs),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue打包使用Nginx代理解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08