Vue?中插槽的使用總結(jié)
更新時(shí)間：2022年04月15日 11:13:49 作者：Errol_King
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
默認(rèn)插槽
首先做一個(gè)頁(yè)面：
新增 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類(lèi)</h3>
? <ul>
? ? <li v-for="(item,index) in listData" :key="index">{{item}}</li>
? </ul>
</div>
</template>
<script>
export default {
? name: "Category",
? props:["title","listData"]
}
</script>
<style scoped>
.category{
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3{
? text-align: center;
? background-color: orange;
}
</style>
App.vue 中使用
<template>
? <div class="container">
? ? <Category title="美食" :listData="foods"/>
? ? <Category title="游戲" :listData="games"/>
? ? <Category title="電影" :listData="films"/>
? </div>
</template>
<script>
import Category from "@/components/Category";
export default {
? name: 'App',
? components: {Category},
? data(){
? ? return{
? ? ? foods:["火鍋","燒烤","小龍蝦","牛排"],
? ? ? games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container {
? display: flex;
? justify-content: space-around;
}
</style>
現(xiàn)在修改需求，每個(gè)分類(lèi)都要展示不同的內(nèi)容：
這里就用到了插槽，修改 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類(lèi)</h3>
? <slot></slot>
</div>
</template>
<script>
export default {
? name: "Category",
? props:["title"]
}
</script>
<style scoped>
.category{
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3{
? text-align: center;
? background-color: orange;
}
</style>修改 App.vue
<template>
? <div class="container">
? ? <Category title="美食" :listData="foods">
? ? ? <img src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
? ? </Category>
? ? <Category title="游戲" :listData="games">
? ? ? <ul>
? ? ? ? <li v-for="(g,index) in games" :key="index">{{g}}</li>
? ? ? </ul>
? ? </Category>
? ? <Category title="電影">
? ? ? <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
? ? </Category>
? </div>
</template>
<script>
import Category from "@/components/Category";
export default {
? name: 'App',
? components: {Category},
? data(){
? ? return{
? ? ? foods:["火鍋","燒烤","小龍蝦","牛排"],
? ? ? games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container {
? display: flex;
? justify-content: space-around;
}
img,video{
? width: 100%;
}
</style>具名插槽
修改 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類(lèi)</h3>
? <slot name="center">這是一些默認(rèn)值，沒(méi)有內(nèi)容時(shí)展示</slot>
? <slot name="footer">這是一些默認(rèn)值，沒(méi)有內(nèi)容時(shí)展示</slot>
</div>
</template>
<script>
export default {
? name: "Category",
? props:["title"]
}
</script>
<style scoped>
.category{
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3{
? text-align: center;
? background-color: orange;
}
</style>修改 App.vue
<template>
? <div class="container">
? ? <Category title="美食" :listData="foods">
? ? ? <img slot="center" src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
? ? ? <a slot="footer" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多美食</a>
? ? </Category>
? ? <Category title="游戲" :listData="games">
? ? ? <ul slot="center">
? ? ? ? <li v-for="(g,index) in games" :key="index">{{g}}</li>
? ? ? </ul>
? ? ? <div class="foot" slot="footer">
? ? ? ? <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >單機(jī)游戲</a>
? ? ? ? <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >網(wǎng)絡(luò)游戲</a>
? ? ? </div>
? ? </Category>
? ? <Category title="電影">
? ? ? <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
? ? ? <!--v-slot 只有template能用-->
? ? ? <template v-slot:footer>
? ? ? ? <div class="foot" slot="footer">
? ? ? ? ? <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >經(jīng)典</a>
? ? ? ? ? <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >熱門(mén)</a>
? ? ? ? ? <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >推薦</a>
? ? ? ? </div>
? ? ? </template>
? ? </Category>
? </div>
</template>
<script>
import Category from "@/components/Category";
export default {
? name: 'App',
? components: {Category},
? data(){
? ? return{
? ? ? foods:["火鍋","燒烤","小龍蝦","牛排"],
? ? ? games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container,.foot {
? display: flex;
? justify-content: space-around;
}
img,video{
? width: 100%;
}
</style>作用域插槽
如果數(shù)據(jù)在 Category 中，但需要展示不同的形式，我們可以通過(guò)插槽傳值，類(lèi)似于我們從父組件向子組件傳值：
<template>
? <div class="category">
? ? <h3>{{ title }}分類(lèi)</h3>
? ? <slot :games="games" :msg="hello"></slot>
? </div>
</template>
<script>
export default {
? name: "Category",
? props: ["title"],
? data() {
? ? return {
? ? ? games: ["勁舞團(tuán)", "QQ飛車(chē)", "超級(jí)瑪麗", "無(wú)人深空"]
? ? }
? }
}
</script>
<style scoped>
.category {
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3 {
? text-align: center;
? background-color: orange;
}
</style>App 中在子組件中使用 <template> 包裹要展示的內(nèi)容，標(biāo)簽中可以使用scope接收傳過(guò)來(lái)的值
<template>
? <div class="container">
? ? <Category title="游戲">
? ? ? <template v-slot="receiveValue">
? ? ? ? <ul>
? ? ? ? ? <li v-for="(g,index) in receiveValue.games" :key="index">{{ g }}</li>
? ? ? ? </ul>
? ? ? ? <a>{{ receiveValue.msg }}</a>
? ? ? </template>
? ? </Category>
? ? <Category title="游戲">
? ? ? <template v-slot="{games,msg}">
? ? ? ? <ol>
? ? ? ? ? <li v-for="(g,index) in games" :key="index">{{ g }}</li>
? ? ? ? </ol>
? ? ? ? <a>{{ msg }}</a>
? ? ? </template>
? ? </Category>
? ? <Category title="游戲">
? ? ? <template v-slot="{games,msg}">
? ? ? ? <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4>
? ? ? ? <a>{{ msg }}</a>
? ? ? </template>
? ? </Category>
? </div>
</template>
<script>
import Category from "@/components/Category";
export default {
? name: 'App',
? components: {Category},
}
</script>
<style>
.container, .foot {
? display: flex;
? justify-content: space-around;
}
img, video {
? width: 100%;
}
</style>
插槽總結(jié)
- 1.作用：讓父組件可以向子組件指定位置插入 html 結(jié)構(gòu)，也是一種組件問(wèn)通信的方式，適用于父組件==>子組件
- 2.分類(lèi)：默認(rèn)插槽、具名插槽、作用域插槽
- 3.使用方式：
默認(rèn)插槽
父組件中：
<Category> ?? ?<div>html結(jié)構(gòu)</div> <Category>
子組件中：
<template> ?? ?<div> ?? ?<!--定義插槽--> ?? ?<slot>插槽默認(rèn)內(nèi)容...</slot> ?? ?</div> </templdte>
具名插槽
父組件中：
<Category> ?? ?<template slot="center"> ?? ??? ?<div>html結(jié)構(gòu)1</div> ?? ?</template> ?? ?<tenplate v-slot:footer> ?? ??? ?<div>html結(jié)構(gòu)2</div> ?? ?</template> </Category>
子組件中：
<template> ?? ?<div> ?? ?<1--定義插槽--> ?? ?<slot name="center">插槽默認(rèn)內(nèi)容...</slot> ?? ?<slot name="footer”>插槽默認(rèn)內(nèi)容...</slot> ?? ?</div> </template>
作用域插槽
- 1.理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來(lái)決定，(games 數(shù)據(jù)在 Category 組件中，但使用數(shù)據(jù)所遍歷出來(lái)的結(jié)構(gòu)由 App 組件決定)
- 2.具體編碼：
父組件中：
<category>
?? ?<template v-slot="scopeData"
?? ?<!--生成的是ul列表-->
?? ?<ul>
?? ??? ?<li v-for="g in scopeDsta.games" : key="g">{g}</li>
?? ?</ul>
?? ?</template>
</Category>
<Category>
?? ?<template v-slot={scopeData}>
?? ?<!--生成的是h4標(biāo)題-->
?? ?<h4 v-for="g in scopeData" :key="g">{{g}}</h4>
?? ?</template>
</Category>子組件中：
<template>
?? ?<div>
?? ??? ?<slot :games="games"></slot>
?? ?</div>
</template>
<script>
export default{
?? ?name: "Category ',
?? ?props: ["title"],
?? ?//數(shù)據(jù)在子組件自身
?? ?data() {
?? ??? ?return{
?? ??? ??? ?games:['紅色警戒,穿越火線(xiàn)',"勁舞團(tuán)",超級(jí)瑪麗"]
?? ??? ?}
?? ?}
}</script>注意：scope和slot-scope過(guò)時(shí)了，可以使用v-slot
到此這篇關(guān)于Vue 中插槽的使用總結(jié)的文章就介紹到這了,更多相關(guān)Vue 插槽使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
本篇文章主要介紹了在Vue中使用echarts的實(shí)例代碼（3種圖），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件
這篇文章主要介紹了vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件，用vue3實(shí)現(xiàn)一個(gè)可在手機(jī)上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣2022-09-09
這篇文章主要介紹了你準(zhǔn)備好迎接vue3.0了嗎,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說(shuō)明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
vue?elementui?大文件進(jìn)度條下載功能實(shí)現(xiàn)
本文介紹了如何使用下載進(jìn)度條來(lái)展示下載進(jìn)度的方法,并展示了相關(guān)的效果圖,結(jié)合實(shí)例代碼介紹了vue?elementui?大文件進(jìn)度條下載的方法,感興趣的朋友一起看看吧2025-01-01
html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁(yè)
這篇文章主要為大家介紹了html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁(yè)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本文主要介紹了vue3+quasar彈窗的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁(yè)面問(wèn)題的解決
這篇文章主要介紹了Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁(yè)面問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01