VUE插槽

匿名插槽

//component1
<div>
	<slot></slot>
</div>

//parent
<component1> hello </component>

具名插槽

将内容分发到指定位置

//component2
<div>
	<slot></slot>
    <slot namr="content"></slot>
</div>

//parent
<component2>
	//默认插槽用default做参数
	<template v-slot:default>
    匿名插槽
    </template>
    //具名插槽用插槽名做参数
    <template v-slot:content>
    具名插槽
    </template>
    </template>
</component2>

作用域插槽

分发内容要用到子组件中的数据

//component3
<div>
	<slot :foo="foo"></slot>
</div>

//parent
<component3>
	//slotProps 这个名字可以随便取
	<template v-slot:default="slotProps">
    来自子组件的数据： {{ slotProps.foo}}
    </template>
</component3>