vue-插槽

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.作用域插槽

 

posted @ 2019-10-21 18:10  PiPai  阅读(147)  评论(0编辑  收藏  举报