vue插槽樣式 vue中的插槽slot

2021-10-13 09:10:28 字數 797 閱讀 1159

插槽(slot):是元件的一塊html模板,父元件決定這塊模板顯不顯示以及怎麼顯示。

位置由子元件自身決定(slot現在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置)

匿名插槽:只能有乙個,可以放在元件的任何位置

//在父元件在裡面寫了html模組

//子元件的匿名插槽被下面的div模板使用了

選單1

具名插槽:有name屬性 可以在乙個元件中多次出現,出現在不同的位置。

父元件:

選單1選單2

選單3選單4

選單5選單6

選單-1

選單-2

選單-3

選單-4

選單-5

選單-6

//沒有slot屬性的html模板預設關聯匿名插槽

選單->1

選單->2

選單->3

選單->4

選單->5

選單->6

子元件:

// 具名插槽

// 具名插槽

// 匿名插槽

作用域插槽(帶資料插槽):在slot上面繫結資料(匿名插槽和具名插槽的的樣式和內容都由父元件提供的模板決定)

父元件:}

}我就是模板

子元件:

// 作用域插槽

export default {

data: function(){

return {

data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']

插槽樣式 vue 插槽2

1.編譯作用域 父級模板裡的所有內容都是在父級作用域中編譯的 子模板裡的所有內容都是在子作用域中編譯的。在開發階段 在哪就是哪的責任,不是最終在哪呈現是哪的責任。主頁面傳遞 頭部 身體 底部 slots頁面呈現 2.作用域插槽實現頭部字型變大,在子模板裡 只是載入作用,不能改變樣式,要想改變只能到父...

vue插槽樣式 vue基礎之插槽

categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名,第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...

vue插槽樣式 Vue的插槽的簡單介紹以及示例

vue插槽的概念 vue的插槽,是一種內容分發機制,但是我感覺它更加像元件的一種佔位符的概念,通過插槽,等待元件外部傳入複雜的內容。使用插槽的好處 在以前的例子中todo item插槽直接寫在了todo list插槽中,其實是比較不合理的,它會導致todo list插槽比較死板,無法重用更多的其他元...