vue中的插槽slot
为了让组件具备更强的通用性
子组件
声明插槽的Comp组件
1
2
3
4
5
| <div>
<slot></slot> //默认插槽，调用default()，将返回的虚拟节点放到这里
<slot name='slot1'></slot> //具名插槽，调用slot1()，将返回的虚拟节点放到这里
<slot name='slot2' msg='hello world'></slot> //作用域插槽，调用slot2({msg:'hello world'})，将返回的虚拟节点放到这里
</div>
|
父组件
使用具有插槽的子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <Comp>
<p>
default slot
</p>
<template #slot1>
<p>
slot1
</p>
</template>
<template #slot2='slotData'>
<p>
slot2:{{slotData.msg}}
</p>
</template>
</Comp>
|
插槽向组件Comp传递一个对象，对象里面的属性名就是插槽名
1
2
3
4
5
6
| {
default:function(){},
slot1:function(){},
slot2:function(slotData){}
}
|