Vue中的插槽Slot技術(shù)詳解
一、引言
Vue.js是一款流行的前端框架，提供了強(qiáng)大的組件化功能。其中，插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù)，允許我們在組件中定義一些占位符，然后在使用組件時(shí)，通過插槽來傳遞內(nèi)容。插槽的靈活性使得我們可以輕松地定制組件的外觀和行為，可以幫助我們更好地處理組件的可復(fù)用性和靈活性。
二、插槽基礎(chǔ)使用
在Vue中，插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽。
1. 默認(rèn)插槽
默認(rèn)插槽是最簡單的插槽形式，它允許我們將組件的內(nèi)容傳遞到組件內(nèi)部的一個占位符中。在組件的模板中使用定義默認(rèn)插槽，然后在使用組件時(shí)，將內(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>定義具名插槽，然后在使用組件時(shí)，使用<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í)例的數(shù)據(jù)，允許父組件將數(shù)據(jù)傳遞到子組件中，并在子組件中使用。在組件的模板中使用<slot name="slotName" v-bind:slotData="data"></slot>定義作用域插槽，并在使用組件時(shí)，使用<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>我們在組件中添加了一個按鈕，并在按鈕的點(diǎn)擊事件處理程序中切換currentSlot的值。當(dāng)按鈕被點(diǎn)擊時(shí)，currentSlot的值會從default切換到custom，或者從custom切換到default，從而實(shí)現(xiàn)默認(rèn)內(nèi)容和自定義內(nèi)容的切換。
在父組件中使用這個組件時(shí)，可以根據(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ì)
其實(shí)從打印結(jié)果可以看出，slot本質(zhì)就是Proxy代理的對象，屬性名就是各個插槽的名字，屬性值就是對應(yīng)的函數(shù)，調(diào)用函數(shù)得到的結(jié)果就是虛擬結(jié)點(diǎn)。
<slot name="slot1"></slot>就相當(dāng)于在調(diào)用屬性名為slot1的函數(shù)，<slot name="slot2" msg="你好世界!"></slot>就相當(dāng)于在調(diào)用屬性名為slot2的函數(shù)，該函數(shù)接收了msg的參數(shù)。
插槽的注意事項(xiàng)
插槽內(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)文章
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
今天整了一個項(xiàng)目,試了下打包,發(fā)下打包后只生成了一個css文件,和一個js文件,這樣肯定是不行的,因?yàn)檫@樣這個文件的包大小很大,第一次訪問會導(dǎo)致白屏問題,所以本文給大家介紹了vite打包只生成了一個css和js文件問題的解決方法,需要的朋友可以參考下2024-05-05
本篇文章主要介紹了詳解 vue better-scroll滾動插件排坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue封裝全局過濾器Filters的步驟，通過封裝vue全局過濾器實(shí)現(xiàn)filters的統(tǒng)一管理。感興趣的朋友可以了解下2020-09-09
vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法，主要目的是實(shí)現(xiàn)未登錄跳轉(zhuǎn)，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了使用Vue制作圖片輪播組件思路詳解,需要的朋友可以參考下2018-03-03
vue基于viewer實(shí)現(xiàn)的圖片查看器功能
這篇文章主要介紹了vue基于viewer實(shí)現(xiàn)的圖片查看器的實(shí)例代碼，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實(shí)例
今天小編就為大家分享一篇VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
使用Element的InfiniteScroll 無限滾動組件報(bào)錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報(bào)錯的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07