vue使用插槽slot

2021-10-21 02:38:31 字數 641 閱讀 4139

vue中使用slot插槽

父元件

<

!-- 插槽的使用 父元件--

>

//父元件接受子元件的資料

"child" slot=

"header"

>

我是頭部

}<

/template>

"footer"

>

我是底部

<

/template>

你好我是底部元件<

/div>

<

/slot-use>

//子元件的內容

="slotcontainder"

>

我是子元件<

/div>

//子元件的資料要傳值給父元件

"data" name=

"header"

>

<

/slot>

"footer"

>

<

/slot>

<

/div>

<

/template>

export

default}}

<

/script>

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插槽的說明很簡短,語言又寫的很凝練,這就有可能造成初次接觸插槽的開發者容易產生 算了吧,回頭再學,反正已經可以寫基礎元件了 的想法,於是就關閉了vue的說明文件。q 假如父元件需要在子元件內放一些dom元素,那麼這些dom是顯示呢還是不顯示呢?預設情況下是不會顯示的,如下...