Vue中插槽Slot基本使用與具名插槽詳解
更新時間：2022年10月29日 10:51:05 作者：東非不開森
有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場,這篇文章主要給大家介紹了關于Vue中插槽Slot基本使用與具名插槽的相關資料,需要的朋友可以參考下
一、插槽Slot
1.1.插槽Slot的作用
??
初識插槽:
- 為了讓這個組件具備更強的通用性，我們不能將組件中的內容限制為固定的div、span等等這些元素；
- 比如某種情況下我們使用組件，希望組件顯示的是一個按鈕，某種情況下我們使用組件希望顯示的是一張圖片；
- 我們應該讓使用者可以決定某一塊區(qū)域到底存放什么內容和元素；
- 所以就可以使用插槽來解決這個問題
換句話說就是，我們要是想在一個組件標簽中添加新的內容，那么我們就需要在該組件內聲明一個插槽，不然，添加的新內容不會被渲染
??
使用插槽：
- 用slot元素作為插槽
- 插入什么內容是由父元素如何使用，比如父組件插入按鈕、插入圖片，就會顯示按鈕圖片，如果沒有，那就不顯示或許顯示插槽默認的內容
- 有時候我們希望在使用插槽時，如果沒有插入對應的內容，那么我們需要顯示一個默認的內容：
- 當然這個默認的內容只會在沒有提供插入的內容時，才會顯示；
- 我們可以在slot標簽中設置一個默認內容
使用插槽案例：
父組件App.vue
<template>
<div class="app">
<!-- 內容是button -->
<show-message title="哈哈哈">
<button>我是按鈕元素</button>
</show-message>
<!-- 內容是超鏈接 -->
<show-message>
<a href="#" rel="external nofollow" rel="external nofollow" >百度一下</a>
</show-message>
<!-- 沒有值傳遞 -->
<show-message></show-message>
</div>
</template>
子組件showMessage.vue
<template>
<h2>{{title}}</h2>
<div class="content">
<slot>
<p>我是默認值</p>
</slot>
</div>
</template>
效果圖：
我們可以發(fā)現(xiàn)，在組件showMessage里面，我們給它一個插槽，
- 在App.vue, 我們給showMessage三次復用，
- 一次為按鈕，一次為a標簽，一次什么也不加
- 而產生的結果就是，一個為按鈕，一個為a鏈接，一個為插槽默認的p標簽
我們可以看出來
- 插槽部分想要展示什么內容由父元素進行決定, 如果插槽沒有 插入東西, 那么這個插槽會被忽略
- 也就是說，用了插槽，父元素如果用按鈕，子元素就會顯示按鈕，父元素用標題，子元素就會顯示標題
- 如果子組件沒有插槽，那就顯示不出來了
1.2.具名插槽Slot
??
希望達到的效果是插槽對應內容的顯示，這個時候我們就可以使用具名插槽：
- 具名插槽顧名思義就是給插槽起一個名字，slot 元素有一個特殊的 attribute：name；
- 一個不帶 name 的slot，會帶有隱含的名字 default；
- 也就是說, 我們可以給每個插槽都取上一個名字,
- 在父組件中使用的時候, 需要包裹一個template標簽, 并在template中使用
- v-solt: 插槽名 具名插槽縮寫#
父組件App.vue
<template>
<nav-bar>
<template v-slot:left>
<button>返回</button>
</template>
<template v-slot:center>
<span>內容</span>
</template>
<template v-slot:right>
<a href="#" rel="external nofollow" rel="external nofollow" >登錄</a>
</template>
</nav-bar>
</template>
子組件
NavBar.vue
(顏色啥的css里面自己可以調，這里就不放了）
<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>
效果圖：
達到的效果是插槽對應的顯示
所以這就是具名插槽的作用
??
動態(tài)插槽名
通過 v-slot:[dynamicSlotName]方式動態(tài)綁定一個名稱；
Ps:作用域插槽
作用域插槽
作用域插槽的主要作用是在書寫插槽內容時可以獲取到插槽作用域的值。
//組件調用start
<ul>
<slot-demo :userObj="userObj">
<template v-slot:footer="message">
<div>{{message.userAge}}</div>
<div>{{message.userName}}</div>
//這里用的message是寫組件時在slot標簽上定義屬性的映射。
</template>
</slot-demo>
</ul>
data() {
return {
userObj: {
age: 3,
name: '張三',
},
}
},
//組件調用end
//書寫組件時start
<template>
<li>
//這里的userObj是組件調用是傳下來的prop
<slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
</slot>
</li>
</template>
props: {
userObj: Object,
},
//書寫組件時end
注意事項：
這里需要注意的是message是所有你綁定屬性的集合，也就是你寫的：:userAge=“userObj.age” 會當做message的屬性來實現(xiàn)。當然這里message可以換做其它的名稱。
總結
到此這篇關于Vue中插槽Slot基本使用與具名插槽的文章就介紹到這了,更多相關Vue 插槽Slot和具名插槽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue如何設置定時器和清理定時器，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue使用數組splice方法失效,且總刪除最后一項的問題及解決
這篇文章主要介紹了vue使用數組splice方法失效,且總刪除最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了在vite項目中使用@進行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文介紹了如何使用Vue.js和jsQR庫來實現(xiàn)調用攝像頭并掃描條碼的功能,通過安裝依賴、獲取攝像頭視頻流、解析條碼等步驟,實現(xiàn)了從開始掃描到停止掃描的完整流程,同時,還強調了瀏覽器兼容性、HTTPS環(huán)境、權限問題和性能優(yōu)化的重要性,感興趣的朋友一起看看吧2025-03-03
這篇文章主要給大家介紹了關于vue3中ref獲取子組件值的相關資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了Vue項目之學生管理系統(tǒng)實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue遞歸組件實戰(zhàn)之簡單樹形控件的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue開發(fā)中后臺系統(tǒng)復雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue跳轉同一個路由參數不同的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應的數據來傳遞數據，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下2023-12-12