您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue插槽Slot的作用是什么及怎么使用”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
初識插槽:
為了讓這個組件具備更強的通用性,我們不能將組件中的內(nèi)容限制為固定的div
、span
等等這些元素;【相關(guān)推薦:vuejs視頻教程】
比如某種情況下我們使用組件,希望組件顯示的是一個按鈕,某種情況下我們使用組件希望顯示的是一張圖片;
我們應(yīng)該讓使用者可以決定某一塊區(qū)域到底存放什么內(nèi)容和元素;
所以就可以使用插槽來解決這個問題
換句話說就是,我們要是想在一個組件標簽中添加新的內(nèi)容,那么我們就需要在該組件內(nèi)聲明一個插槽,不然,添加的新內(nèi)容不會被渲染
使用插槽:
用slot
元素作為插槽
插入什么內(nèi)容是由父元素如何使用,比如父組件插入按鈕、插入圖片,就會顯示按鈕圖片,如果沒有,那就不顯示或許顯示插槽默認的內(nèi)容
有時候我們希望在使用插槽時,如果沒有插入對應(yīng)的內(nèi)容,那么我們需要顯示一個默認的內(nèi)容:
當然這個默認的內(nèi)容只會在沒有提供插入的內(nèi)容時,才會顯示;
我們可以在slot
標簽中設(shè)置一個默認內(nèi)容
使用插槽案例:
父組件
App.vue
<template>
<div class="app">
<!-- 內(nèi)容是button -->
<show-message title="哈哈哈">
<button>我是按鈕元素</button>
</show-message>
<!-- 內(nèi)容是超鏈接 -->
<show-message>
<a href="#">百度一下</a>
</show-message>
<!-- 沒有值傳遞 -->
<show-message></show-message>
</div>
</template>
子組件showMessage.vue
<template>
<h3>{{title}}</h3>
<div class="content">
<slot>
<p>我是默認值</p>
</slot>
</div>
</template>
效果圖:
我們可以發(fā)現(xiàn),在組件showMessage
里面,我們給它一個插槽,
在App.vue
, 我們給showMessage
三次復(fù)用,
一次為按鈕
,一次為a標簽
,一次什么也不加
而產(chǎn)生的結(jié)果就是,一個為按鈕
,一個為a鏈接
,一個為插槽默認的p標簽
我們可以看出來
插槽部分想要展示什么內(nèi)容由父元素進行決定, 如果插槽沒有 插入東西, 那么這個插槽會被忽略
也就是說,用了插槽,父元素如果用按鈕,子元素就會顯示按鈕,父元素用標題,子元素就會顯示標題
如果子組件沒有插槽,那就顯示不出來了
希望達到的效果是插槽對應(yīng)內(nèi)容的顯示,這個時候我們就可以使用具名插槽:
具名插槽顧名思義就是給插槽起一個名字,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>內(nèi)容</span>
</template>
<template v-slot:right>
<a href="#">登錄</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>
效果圖:
達到的效果是插槽對應(yīng)的顯示
所以這就是具名插槽的作用
動態(tài)插槽名
通過 v-slot:[dynamicSlotName]
方式動態(tài)綁定一個名稱。
“Vue插槽Slot的作用是什么及怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。