vue之插槽

插槽

1.匿名插槽

//childCom1
<div>
    <slot></slot>
</div>

// parentCom1
<child-com1>
    hello
</child-com1>

2.具名插槽

 //childComp2
 <div>
    <slot></slot>
    <slot name="content"></slot>
 </div>
 
 //parentComp2
 <child-comp2>
   <!--默认插槽用default做参数-->
   <template v-slot:default>具名插槽</template>
    <template v-slot:content>内容</template>
</child-comp2>

3.作用域插槽

    //childComp3
    <div>
       <slot :foo="foo"></slot>
    </div>
    
    //parentComp3
    <child-comp3>
        <template v-slot:default="ctx">
            来自子组件的数据：{{ctx.foo}}
        </template>
    </child-comp3>