Vue初學 插槽slot

2021-10-05 17:18:09 字數 805 閱讀 9497

匿名插槽

************

我們使用slot標籤在元件中定義插槽,當我們在呼叫元件的標籤內寫入內容的時候,這段內容會替換匿名的插槽,slot標籤相當於乙個佔位符。

1.當插槽標籤中有內容,而且元件標籤內未插入任何資料時,頁面會顯示插槽標籤內的內容,相當於是插槽的預設值。但是如果元件標籤內插入了任意資料,頁面則會顯示元件標籤插入的內容。**如下:

******aaaa******

2.如果有多個匿名插槽,則元件標籤內的資料,會插入到所有的匿名插槽中。**如下:

******aaaa******

------aaaa-------

3.插槽中不僅可以插入資料,還可以插入模板和html**。**如下:

************

我是子元件2

具名插槽

在slot標籤中使用name屬性為每乙個插槽指定名稱,使用v-slot指令來指定資料應該插入的哪乙個具名插槽中,需要重點注意的是v-slot這個指令只能寫在template標籤中。

作用域插槽

}

Vue 使用插槽(slot)

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

Vue筆記 slot插槽

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

Vue插槽slot使用

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