vue插槽

默认插槽（没有名字的插槽）

// 父组件
<template>
    <p>默认插槽</p>
</template>

// 子组件
<slot></slot>

具名插槽（带名字的插槽）

老版 2.6.0以前

// 父组件
<template slot="header">
    <p>老版具名插槽</p>
</template>

// 子组件

新版

// 父组件
<template v-slot:title>
    <p>具名插槽</p>
</template>

// 子组件
<slot name="title"></slot>

作用域插槽（父组件可以获取子组件传过来的值）

老版 2.6.0以前

// 父组件
<template slot="item" slot-scope="value"> 
    <p>{{ value.value }}</p> 
</template>

// 子组件
<slot name="item" :value="{ value: '作用域插槽' }"></slot>

新版 2.6.0以后

// 父组件
<template v-slot:item="value">
    <p>{{ value.value }}</p>
</template>

// 子组件
<slot name="item" :value="{ value: '作用域插槽' }"></slot>