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...