Vue?中插槽的使用總結(jié)
更新時(shí)間：2022年04月15日 11:13:49 作者：Errol_King
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
默認(rèn)插槽
首先做一個(gè)頁面：
新增 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類</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飛車","超級(jí)瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container {
? display: flex;
? justify-content: space-around;
}
</style>
現(xiàn)在修改需求，每個(gè)分類都要展示不同的內(nèi)容：
這里就用到了插槽，修改 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類</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飛車","超級(jí)瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container {
? display: flex;
? justify-content: space-around;
}
img,video{
? width: 100%;
}
</style>具名插槽
修改 Category.vue
<template>
<div class="category">
? <h3>{{title}}分類</h3>
? <slot name="center">這是一些默認(rèn)值，沒有內(nèi)容時(shí)展示</slot>
? <slot name="footer">這是一些默認(rèn)值，沒有內(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" >熱門</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飛車","超級(jí)瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }
}
</script>
<style>
.container,.foot {
? display: flex;
? justify-content: space-around;
}
img,video{
? width: 100%;
}
</style>作用域插槽
如果數(shù)據(jù)在 Category 中，但需要展示不同的形式，我們可以通過插槽傳值，類似于我們從父組件向子組件傳值：
<template>
? <div class="category">
? ? <h3>{{ title }}分類</h3>
? ? <slot :games="games" :msg="hello"></slot>
? </div>
</template>
<script>
export default {
? name: "Category",
? props: ["title"],
? data() {
? ? return {
? ? ? games: ["勁舞團(tuán)", "QQ飛車", "超級(jí)瑪麗", "無人深空"]
? ? }
? }
}
</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接收傳過來的值
<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)，也是一種組件問通信的方式，適用于父組件==>子組件
- 2.分類：默認(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)需要組件的使用者來決定，(games 數(shù)據(jù)在 Category 組件中，但使用數(shù)據(jù)所遍歷出來的結(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:['紅色警戒,穿越火線',"勁舞團(tuán)",超級(jí)瑪麗"]
?? ??? ?}
?? ?}
}</script>注意：scope和slot-scope過時(shí)了，可以使用v-slot
到此這篇關(guān)于Vue 中插槽的使用總結(jié)的文章就介紹到這了,更多相關(guān)Vue 插槽使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element table跨分頁多選及回顯的實(shí)現(xiàn)示例
本文主要介紹了element table跨分頁多選及回顯的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)翻牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
VUE中使用滾動(dòng)組件-vueSeamlessScroll
這篇文章主要介紹了VUE中使用滾動(dòng)組件-vueSeamlessScroll,需要的朋友可以參考下2023-10-10
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue實(shí)現(xiàn)網(wǎng)易云音樂純界面
這篇文章主要為大家介紹了vue實(shí)現(xiàn)網(wǎng)易云音樂純界面過程詳解，附含詳細(xì)源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
vue使用Vue.extend方法仿寫個(gè)loading加載中效果實(shí)例
在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關(guān)于vue使用Vue.extend方法仿寫個(gè)loading加載中效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運(yùn)行原理，文章通過圍繞主題展開相關(guān)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09