uniapp中slot插槽的使用

2021-10-05 15:40:01 字數 1544 閱讀 2513

slot-one元件:

我是子元件

父元件引用slot-one元件:

父元件插槽內容

效果:

slot-one元件如上不變。

父元件引用slot-one元件:

插槽內可以包含任何模板**,包括 html

效果:

slot-one元件如上不變,slot-two元件:

slottwo

父元件引用slot-one元件,slot-one包含slot-two元件:

插槽內可以包含其它的元件,下面的內容來自slottwo元件

效果:

slot-one元件(帶有預設值):

我是子元件

slot後備內容

父元件引用slot-one元件:

提供的內容將會被渲染從而取代後備內容

效果:

slot-two元件:

slottwo

父元件引用slot-two元件:

default:沒有指定name的預設插槽的內容

header:我是name為header的slot

footer:我是name為footer的slot

效果:

slot-three元件:

我是作用域插槽的子元件

父元件引用slot-three元件:

}

}

效果:

todolist元件:

父元件引用todolist元件:

}data() , , ]

};},

效果:

Vue中的slot插槽

前言 之前學vue對插槽只有乙個模糊的存值概念,最近在封裝自定義元件時,再次學習一下。通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參,簡化了進行自定義元件的封裝和使用。自己對插槽理解 就是乙個站位html模板,用來攜帶內容,插入到合適的位置,由父元件來決定其顯示的內容,使得模組...

vue中的slot(插槽)

1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名,並在使用的時...

Vue中的插槽 slot

一 什麼是插槽?二 怎麼用插槽?2.1預設插槽 子元件 template div class slotcontent ul li v for item in items li ul div template script export default script style scoped styl...