Vue筆記(四) 插槽(slot)

2022-09-15 22:27:19 字數 385 閱讀 5594

插槽(slot)用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。

示例**:

1239

1011

1314

15for="item in items" v-bind:list="item">

1617

1819

2021

2252

5354

55

在上面的**中,todo的template中的內容如果不加反斜槓,那麼只能寫在一行中,但是為了提高**的可讀性,又要使**不出問題,就需要在每次換行的後面加上乙個反斜槓來轉義。除此之外,在使用slot時要注意通過name屬性來將slot和對應的component進行繫結。

Vue筆記 slot插槽

元件的插槽是為了讓封裝的元件有更好的擴充套件性,讓使用者決定要展示什麼東西 元件模板 cpn 我是cpnh2 slot div template html 中運用元件,並將不同的內容放入插槽 type button 確定button cpn 哈哈哈哈哈哈span cpn 呵呵呵呵呵呵span cpn...

Vue 使用插槽(slot)

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

Vue初學 插槽slot

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