Vue筆記 slot插槽

2021-10-07 05:38:13 字數 1973 閱讀 6814

元件的插槽是為了讓封裝的元件有更好的擴充套件性,讓使用者決定要展示什麼東西

元件模板:

"cpn"

>

>

>

我是cpnh2

>

>

slot

>

div>

template

>

html**中運用元件,並將不同的內容放入插槽

>

type

="button"

>

確定button

>

cpn>

>

>

哈哈哈哈哈哈span

>

cpn>

>

>

呵呵呵呵呵呵span

>

cpn>

slot中可以定義預設的插槽,如果沒有定義插槽中的東西會預設使用slot中的預設值,如果有多個值放入插槽,會全部放入插槽中

"cpn"

>

>

name

="left"

>

左邊的slot

>

name

="center"

>

中間的slot

>

name

="right"

>

右邊的slot

>

div>

template

>

使用:>

slot

="center"

>

hahahahahaspan

>

cpn>

效果:

手冊中:父元件模板的所有東西都會在父級作用域內編譯;子元件模板的左右東西都會在子級作用域內編譯

對於例項中用到的資料,**註冊的這個元件,就用**的資料

元件模板只會用元件內的資料,也就是元件註冊時會要給到的data函式中的資料

1、案例需求

子元件中包括一組資料,比如:

books:[「源氏」,「夕顏」,「紫姬」,「藤壺妃子」,「朧月夜」]

#### 2、案例實現

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

head

>

>

>

>

>

helloh2

>

slot-scope

="slot"

>

>

v-for

="item in slot.data"

>

}-span

>

}這個可以使最後乙個短橫沒有-->

div>

template

>

cpn>

div>

"cpn"

>

>

:data

="characters"

>

>

v-for

="item in characters"

>

}li>

ul>

slot

>

div>

template

>

Vue筆記(四) 插槽(slot)

插槽 slot 用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。示例 1239 1011 1314 15for item in items v bind list item 1617 1819 2021 2252 5354 55 在上面的 中,todo的...

Vue 使用插槽(slot)

當父元件向子元件傳值的時候,有時候,父元件傳的並不是單純的數值 字串,有可能是帶標籤 dom 的資料,那麼如何傳值呢?如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...

Vue初學 插槽slot

匿名插槽 我們使用slot標籤在元件中定義插槽,當我們在呼叫元件的標籤內寫入內容的時候,這段內容會替換匿名的插槽,slot標籤相當於乙個佔位符。1.當插槽標籤中有內容,而且元件標籤內未插入任何資料時,頁面會顯示插槽標籤內的內容,相當於是插槽的預設值。但是如果元件標籤內插入了任意資料,頁面則會顯示元件...