2023-1-12 前端達(dá)人
例如老板要讓你使用組件寫分類欄，然后使用該組件生成兩個分類欄，這兩個分類欄里的數(shù)據(jù)都不一樣，但是整體結(jié)構(gòu)是一樣的，這就要求組件的結(jié)構(gòu)一樣，但是內(nèi)部 DOM 結(jié)構(gòu)是由使用組件的時候決定的，這就需要插槽，其就像放在組件中的占位標(biāo)簽，使用組件時我們將要放到占位標(biāo)簽處的DOM結(jié)構(gòu)寫入組件標(biāo)簽體中即可。
例如如下圖例子，第一個分類框我們要展示熱門電影，第二個分類框我們要展示一張風(fēng)景圖，整體的框架是一樣的，只是其內(nèi)部填充的東西不一樣下面會做出更深刻的理解。
此板塊我們講述第一個插槽：默認(rèn)插槽。之前我們使用組件的時候，引入進(jìn) App.vue 后注冊就可以采用 自閉合 與 完整組件標(biāo)簽 的方式使用，以下就是常采用的自閉合與完整組件標(biāo)簽方式（以 test組件為例）
但是插槽的使用我們就要把要放在插槽中的內(nèi)容寫在組件標(biāo)簽體內(nèi)，例如我們要在插槽中放入一個 ul 列表，那么我們使用組件時就要這樣書寫：
接下來說說默認(rèn)插槽的寫法，如果我們只在使用組件時的組件標(biāo)簽體內(nèi)寫上內(nèi)容，那頁面上是顯示不出來任何東西的，這是因為標(biāo)簽體內(nèi)的內(nèi)容確實被解析了，但是vue不知道要把這些東西放在組件中 template 的哪個位置，故我們要在組件的 template 中設(shè)置一個插槽來占位，以保證使用組件時其解析的內(nèi)容可以放入占的位置中去。占位我們使用一個很重要的標(biāo)簽 ------ slot，我們需要在組件的 template 中這樣書寫：
這樣使用組件時組件標(biāo)簽體中的內(nèi)容就可以放入組件的默認(rèn)插槽中了
我們來實現(xiàn)一下上述的分類案例，讓第一個分類展示電影，第二個分類放一張圖片進(jìn)去，但整體組件結(jié)構(gòu)一樣
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">{{name}}</div>
-
<slot></slot> //slot設(shè)置默認(rèn)插槽來占位
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
props:['name'] //propos接收傳來的標(biāo)題名稱
-
}
-
</script>
-
-
<style scoped>
-
//css太占地方就刪掉了
-
</style>
App.vue組件：
-
<template>
-
<div class="app-box">
-
<Classify name='熱門電影'> //使用組件并在組件標(biāo)簽體中書寫要放進(jìn)插槽中的內(nèi)容
-
<ul>
-
<li>肖申克的救贖</li>
-
<li>1912</li>
-
<li>零的執(zhí)行人</li>
-
</ul>
-
</Classify>
-
<Classify name="風(fēng)景">
-
<img src="./img/QQ圖片20220818163031.jpg" alt="">
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue' //引入組件
-
export default {
-
name: 'App',
-
data() {
-
return {
-
}
-
},
-
components: {
-
Classify:Classify //注冊組件
-
}
-
}
-
</script>
-
-
<style scoped>
-
//css太占位置刪掉了
-
</style>
這樣就可以實現(xiàn)一個最基本的默認(rèn)插槽案例了
具名插槽其實只是在默認(rèn)插槽的基礎(chǔ)上給每個插槽起了名字，作用為可以在組件中設(shè)置多個插槽，可以更具體細(xì)分。首先給組件插槽起名字，使用 name="xxx"。
上面就在組件中定義好了三個具名插槽，下面我們來看使用插槽的寫法，依舊是在使用組件標(biāo)簽時在標(biāo)簽體內(nèi)寫入內(nèi)容，但是要注意要使用 slot="xxx" 寫在組件標(biāo)簽體外層盒子上來指明放入哪個插槽中
上面的寫法其實并不完善，slot寫在每個指定插槽的外層大盒子 div 上了，這樣會給其增加一層 DOM 結(jié)構(gòu)，我們最好把 div 換成 template 標(biāo)簽，因為 template 標(biāo)簽不會被解析，結(jié)構(gòu)更清晰不多余。
下面簡單實現(xiàn)一下具名插槽的使用
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是具名插槽的內(nèi)容</div>
-
<slot name="header"></slot>
-
<slot name="body"></slot>
-
<slot name="footer"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue組件：
-
<template>
-
<div class="app-box">
-
<Classify>
-
<div slot="header">
-
<span>我在header插槽中</span>
-
</div>
-
<div slot="body">
-
<span>我在body插槽中</span>
-
</div>
-
<div slot="footer">
-
<span>我在footer插槽中</span>
-
</div>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
這樣就簡單實現(xiàn)了具名插槽
作用域插槽較難理解，但其簡單解釋就是帶有數(shù)據(jù)的插槽，把組件中的數(shù)據(jù)綁定給插槽，然后誰使用這個組件誰就能拿到這個數(shù)據(jù)使用，也相當(dāng)于一種數(shù)據(jù)通信，其需要這樣把數(shù)據(jù)綁定定義給組件插槽（名稱沒有要求）
然后就要使用組件時使用 slot-scope="xxx" 去接收，或者直接使用 scope，要注意的是此處標(biāo)準(zhǔn)一點最好寫在 template 中，這里的 xxx 不需要和組件插槽中起的名字一樣，隨便起就行。然后我們打印一下接收到的數(shù)據(jù)看看其是什么
可以看到我們接受到了一個對象，對象中包含的是你插槽中綁定的所有數(shù)據(jù)（我們只綁定了一個所以對象里只有一組數(shù)據(jù)），對此我們就能在組件標(biāo)簽體中使用得到的數(shù)據(jù)了
下面簡單實現(xiàn)一下作用域插槽的使用
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是作用域插槽的內(nèi)容</div>
-
<slot :hobby="hobby"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
hobby:['打游戲','睡大覺','吃大餐']
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue組件：
此處 slot-scope 接收的數(shù)據(jù)使用了es6解構(gòu)把數(shù)據(jù)解構(gòu)出來了
-
<template>
-
<div class="app-box">
-
<Classify>
-
<template slot-scope="{hobby}">
-
<ul>
-
<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
-
</ul>
-
</template>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
這樣就簡單實現(xiàn)了作用域插槽的案例
感謝支持'
來源：csdn
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn