Vue中插槽Slot基本使用與具名插槽詳解
一、插槽Slot
1.1.插槽Slot的作用
??
初識(shí)插槽:
- 為了讓這個(gè)組件具備更強(qiáng)的通用性,我們不能將組件中的內(nèi)容限制為固定的div、span等等這些元素;
- 比如某種情況下我們使用組件,希望組件顯示的是一個(gè)按鈕,某種情況下我們使用組件希望顯示的是一張圖片;
- 我們應(yīng)該讓使用者可以決定某一塊區(qū)域到底存放什么內(nèi)容和元素;
- 所以就可以使用插槽來(lái)解決這個(gè)問(wèn)題
換句話說(shuō)就是,我們要是想在一個(gè)組件標(biāo)簽中添加新的內(nèi)容,那么我們就需要在該組件內(nèi)聲明一個(gè)插槽,不然,添加的新內(nèi)容不會(huì)被渲染
??
使用插槽:
- 用slot元素作為插槽
- 插入什么內(nèi)容是由父元素如何使用,比如父組件插入按鈕、插入圖片,就會(huì)顯示按鈕圖片,如果沒(méi)有,那就不顯示或許顯示插槽默認(rèn)的內(nèi)容
- 有時(shí)候我們希望在使用插槽時(shí),如果沒(méi)有插入對(duì)應(yīng)的內(nèi)容,那么我們需要顯示一個(gè)默認(rèn)的內(nèi)容:
- 當(dāng)然這個(gè)默認(rèn)的內(nèi)容只會(huì)在沒(méi)有提供插入的內(nèi)容時(shí),才會(huì)顯示;
- 我們可以在slot標(biāo)簽中設(shè)置一個(gè)默認(rèn)內(nèi)容
使用插槽案例:
父組件App.vue
<template> <div class="app"> <!-- 內(nèi)容是button --> <show-message title="哈哈哈"> <button>我是按鈕元素</button> </show-message> <!-- 內(nèi)容是超鏈接 --> <show-message> <a href="#" rel="external nofollow" rel="external nofollow" >百度一下</a> </show-message> <!-- 沒(méi)有值傳遞 --> <show-message></show-message> </div> </template>
子組件showMessage.vue
<template> <h2>{{title}}</h2> <div class="content"> <slot> <p>我是默認(rèn)值</p> </slot> </div> </template>
效果圖:
我們可以發(fā)現(xiàn),在組件showMessage里面,我們給它一個(gè)插槽,
- 在App.vue, 我們給showMessage三次復(fù)用,
- 一次為按鈕,一次為a標(biāo)簽,一次什么也不加
- 而產(chǎn)生的結(jié)果就是,一個(gè)為按鈕,一個(gè)為a鏈接,一個(gè)為插槽默認(rèn)的p標(biāo)簽
我們可以看出來(lái)
- 插槽部分想要展示什么內(nèi)容由父元素進(jìn)行決定, 如果插槽沒(méi)有 插入東西, 那么這個(gè)插槽會(huì)被忽略
- 也就是說(shuō),用了插槽,父元素如果用按鈕,子元素就會(huì)顯示按鈕,父元素用標(biāo)題,子元素就會(huì)顯示標(biāo)題
- 如果子組件沒(méi)有插槽,那就顯示不出來(lái)了
1.2.具名插槽Slot
??
希望達(dá)到的效果是插槽對(duì)應(yīng)內(nèi)容的顯示,這個(gè)時(shí)候我們就可以使用具名插槽:
- 具名插槽顧名思義就是給插槽起一個(gè)名字,slot 元素有一個(gè)特殊的 attribute:name;
- 一個(gè)不帶 name 的slot,會(huì)帶有隱含的名字 default;
- 也就是說(shuō), 我們可以給每個(gè)插槽都取上一個(gè)名字,
- 在父組件中使用的時(shí)候, 需要包裹一個(gè)template標(biāo)簽, 并在template中使用
- v-solt: 插槽名 具名插槽縮寫(xiě)#
父組件App.vue
<template> <nav-bar> <template v-slot:left> <button>返回</button> </template> <template v-slot:center> <span>內(nèi)容</span> </template> <template v-slot:right> <a href="#" rel="external nofollow" rel="external nofollow" >登錄</a> </template> </nav-bar> </template>
子組件
NavBar.vue
(顏色啥的css里面自己可以調(diào),這里就不放了)
<template> <div class="nav-bar"> <div class="left"> <slot name="left">left</slot> </div> <div class="center"> <slot name="center">center</slot> </div> <div class="right"> <slot name="right">right</slot> </div> </div> </template>
效果圖:
達(dá)到的效果是插槽對(duì)應(yīng)的顯示
所以這就是具名插槽的作用
??
動(dòng)態(tài)插槽名
通過(guò) v-slot:[dynamicSlotName]
方式動(dòng)態(tài)綁定一個(gè)名稱(chēng);
Ps:作用域插槽
作用域插槽
作用域插槽的主要作用是在書(shū)寫(xiě)插槽內(nèi)容時(shí)可以獲取到插槽作用域的值。
//組件調(diào)用start <ul> <slot-demo :userObj="userObj"> <template v-slot:footer="message"> <div>{{message.userAge}}</div> <div>{{message.userName}}</div> //這里用的message是寫(xiě)組件時(shí)在slot標(biāo)簽上定義屬性的映射。 </template> </slot-demo> </ul> data() { return { userObj: { age: 3, name: '張三', }, } }, //組件調(diào)用end //書(shū)寫(xiě)組件時(shí)start <template> <li> //這里的userObj是組件調(diào)用是傳下來(lái)的prop <slot name='footer' :userAge="userObj.age" :userName="userObj.name" > </slot> </li> </template> props: { userObj: Object, }, //書(shū)寫(xiě)組件時(shí)end
注意事項(xiàng):
這里需要注意的是message是所有你綁定屬性的集合,也就是你寫(xiě)的::userAge=“userObj.age” 會(huì)當(dāng)做message的屬性來(lái)實(shí)現(xiàn)。當(dāng)然這里message可以換做其它的名稱(chēng)。
總結(jié)
到此這篇關(guān)于Vue中插槽Slot基本使用與具名插槽的文章就介紹到這了,更多相關(guān)Vue 插槽Slot和具名插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過(guò)對(duì)海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶(hù)更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來(lái)越流行,本文將介紹如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決
這篇文章主要介紹了vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果的相關(guān)資料,vue的過(guò)渡動(dòng)畫(huà)主要是transition標(biāo)簽的使用,配合css動(dòng)畫(huà)實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
這篇文章主要介紹了vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04關(guān)于Vue?監(jiān)控?cái)?shù)組的問(wèn)題
這篇文章主要介紹了Vue?監(jiān)控?cái)?shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化,Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測(cè)到,對(duì)vue監(jiān)控?cái)?shù)組知識(shí)是面試比較常見(jiàn)的問(wèn)題,感興趣的朋友一起看看吧2022-05-05解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue之this.$router.push頁(yè)面刷新問(wèn)題
這篇文章主要介紹了vue之this.$router.push頁(yè)面刷新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12