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