本篇內容介紹了“Vue插槽Slot的作用是什么及怎么使用”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于成都網(wǎng)站制作、網(wǎng)站設計、阜新網(wǎng)絡推廣、小程序設計、阜新網(wǎng)絡營銷、阜新企業(yè)策劃、阜新品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供阜新建站搭建服務,24小時服務熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com
初識插槽:
為了讓這個組件具備更強的通用性,我們不能將組件中的內容限制為固定的div
、span
等等這些元素;【相關推薦:vuejs視頻教程】
比如某種情況下我們使用組件,希望組件顯示的是一個按鈕,某種情況下我們使用組件希望顯示的是一張圖片;
我們應該讓使用者可以決定某一塊區(qū)域到底存放什么內容和元素;
所以就可以使用插槽來解決這個問題
換句話說就是,我們要是想在一個組件標簽中添加新的內容,那么我們就需要在該組件內聲明一個插槽,不然,添加的新內容不會被渲染
使用插槽:
用slot
元素作為插槽
插入什么內容是由父元素如何使用,比如父組件插入按鈕、插入圖片,就會顯示按鈕圖片,如果沒有,那就不顯示或許顯示插槽默認的內容
有時候我們希望在使用插槽時,如果沒有插入對應的內容,那么我們需要顯示一個默認的內容:
當然這個默認的內容只會在沒有提供插入的內容時,才會顯示;
我們可以在slot
標簽中設置一個默認內容
使用插槽案例:
父組件
App.vue
子組件showMessage.vue
我是默認值
{{title}}
效果圖:
我們可以發(fā)現(xiàn),在組件showMessage
里面,我們給它一個插槽,
在App.vue
, 我們給showMessage
三次復用,
一次為按鈕
,一次為a標簽
,一次什么也不加
而產生的結果就是,一個為按鈕
,一個為a鏈接
,一個為插槽默認的p標簽
我們可以看出來
插槽部分想要展示什么內容由父元素進行決定, 如果插槽沒有 插入東西, 那么這個插槽會被忽略
也就是說,用了插槽,父元素如果用按鈕,子元素就會顯示按鈕,父元素用標題,子元素就會顯示標題
如果子組件沒有插槽,那就顯示不出來了
希望達到的效果是插槽對應內容的顯示,這個時候我們就可以使用具名插槽:
具名插槽顧名思義就是給插槽起一個名字,slot
元素有一個特殊的 attribute:name
;
一個不帶 name
的slot
,會帶有隱含的名字 default
;
也就是說, 我們可以給每個插槽都取上一個名字,
在父組件中使用的時候, 需要包裹一個template
標簽, 并在template
中使用
v-solt: 插槽名 具名插槽縮寫#
父組件App.vue
子組件NavBar.vue
(顏色啥的css里面自己可以調,這里就不放了)
效果圖:
達到的效果是插槽對應的顯示
所以這就是具名插槽的作用
動態(tài)插槽名
通過 v-slot:[dynamicSlotName]
方式動態(tài)綁定一個名稱。
“Vue插槽Slot的作用是什么及怎么使用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質量的實用文章!