Vue 與 Slot 結合
Vue 與 Slot 結合
Slot
Slot是什麼?可以讓你插入HTML內容。會使用的時機通常是結構都相同,但是裡面的HTML需要更改,CSS表現方式可能有三四種,這時Slot就可以派上用場了。
用法
匿名插槽
匿名插槽就是slot不設定name屬性,通常用在屬性較單純,只需要插入一個地方處。他會抓父元件template裡的內容。
子元件1
2
3
4
5
6
7<template>
<div class="content">
<header class="text">
<slot>預設值</slot>
</header>
</div>
</template>
父元件,在template中的內容都會被帶入slot上。如果slot是變數,那他可以帶HTML各種格式填入進去。
具名插槽
最近流行武漢肺炎,去藥局都需要實名購買,Slot也是有實名制的!Slot有一個叫name
的屬性,根據name來認內容。就和我們要去買口罩,他是看健保卡認的,才會給你買口罩喔XD。
1 |
|
子元件做了main
與footer
的插槽,接著來看父元件怎麼做設定
1 |
|
v-slot 如果定義同樣的 name,只會加載最後一個定義的slot內容。可以用#來做縮小name="footer"
等同於 #footer
作用域插槽
作用域插槽就是可以讓父元件讀取到子元件的data及method,平常不是使用slot情況,父元件要吃子元件的method或data,是用$emit
或eventBus
來傳值。接下來示範在slot情況下,要怎麼父傳給子
接著是父元件的設定,我們會在父元件定義v-slot:xxx="slotProps"
或是#xxx="slotProps"
,總之怎麼樣都一定少不了slotProps
,當然slotProps
也可以重新命名,他就是用來讀取子元件的資料或方法
我們剛剛在子元件定義了user的data
、testClick的方法
,你看,我們在父元件都用得上,很方便!
實戰:Menu
我們的Menu有點複雜,我希望他有兩種型態,第一種型態是直接跳連結、第二種型態是show wrapper。
第一種型態:有li1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// 父元件:展開Menu,有li
<MenuItem :show="showMenu = true">
<template #name>關於我們</template>
<template #content>
<li class="col d-flex justify-content-center align-items-end">
<div class="menu-item__wrapper__content">Show Content</div>
</li>
<li class="col d-flex justify-content-center align-items-end">
<div>
還在等什麼?快來訂閱我!
</div>
</li>
<li class="col d-flex justify-content-center align-items-end">
<div class="menu-item__wrapper__content"></div>
</li>
</template>
</MenuItem>
你可以看到父元件我用了兩個插槽,分別是#name
, #content
,由於選單都是用CSS的變化操作,所以並沒有用到slotProps,也就是子元件的資料及方法。
第二種型態:直接跳新頁面1
2
3
4
5
6
7
8
9
10
11
12// 父元件:第二種型態,直接跳新頁面
<MenuItem :show="showMenu = false">
<template #name>
優惠活動
</template>
</MenuItem>
export default {
data() {
return { showMenu: true }
}
}
接著來看看子元件
1 |
|
子元件除了設定要插在哪裏的name
、content
之外,在menu-item__wrapper
內另外用v-if
來傳值,切換第一種型態、第二種型態選單的關鍵,再用props去接收show的值。
Reference
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!