vue中的插槽

匿名插槽

// comp1
<div>
<slot></slot>
</div>
// parent
<comp>hello</comp>

具名插槽

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

作用域插槽

 

// comp3
<div>
<slot :foo="foo"></slot>
</div>
// parent
<Comp3>
<!-- 把v-slot的值指定为作用域上下文对象 -->
<template v-slot:default="ctx">
来自子组件数据：{{ctx.foo}}
</template>
</Comp3>