vue中插槽slot的使用

2022-06-21 14:42:14 字數 727 閱讀 1427

一、插槽 :slot

1、使用情況:當子元件在父元件中當標籤使用時,如果子元件內部需要進行巢狀一些**內容時,這時候就需要在子元件內插入插槽。

例子:父元件:

其中標籤內是需要巢狀的**,若直接這樣寫是無法在頁面中顯示的,

"

">

11222

333

子元件:

class="

home content

">

"box">

home

"con

">

"list

">

其中,給slot 標籤增加name屬性,並按照順序排序,會控制子元件標籤中的**內容的顯示順序。

瀏覽器顯示順序為:(截圖好麻煩,還得匯入,直接上文字嘍。。。)

小王

home

11222

333小皮

aaaa

bbbb

cccc

ddd

總結一波:在子元件中插入slot標籤,可以接收在父元件中子元件標籤內的所有內容。如果給子元件標籤內容中的內容增加slot屬性,並子元件中給slot增加name屬性,可以按照書寫順序排序。

Vue 使用插槽(slot)

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

Vue插槽slot使用

子元件 child1 此時插槽區域內顯示文案hello 父元件 hello用途 讓內容顯示到元件內的指定位置 子元件 child1 顯示預設的插槽 會顯示v slot為content的內容 parent 預設插槽使用default做引數 哈哈哈 具名插槽使用插槽名做引數 具名插槽 用途 讓內容成為某...

vue使用插槽slot

vue中使用slot插槽 父元件 插槽的使用 父元件 父元件接受子元件的資料 child slot header 我是頭部 template footer 我是底部 template 你好我是底部元件 div slot use 子元件的內容 slotcontainder 我是子元件 div 子元件的...