1.插槽内容及后备内容
子组件header
1 <div class="header"> 2 <slot>this is header</slot> 3 </div>
插槽内容--父组件引用时不加内容<header></header>则显示:
this is header
后备内容--父组件引用时加内容<header>this is parent</header>则显示:
this is parent
2.具名插槽
子组件header
1 <div class="header"> 2 <slot name="left">left</slot> 3 <slot>default</slot> 4 <slot name="right">right</slot> 5 </div>
一个不带 name
的 <slot>
出口会带有隐含的名字“default”
在父组件引用的时候就可以按照需求来分别为不同的插槽赋值
1 <header v-slot:left>this is left</header> // this is left 2 <header v-slot:default>this is default</header> // this is default 3 <header v-slot:right>this is right</header> // this is right
v-slot
只能添加在一个组件上!
3.作用域插槽