一、默认插槽

1.什么时候使用插槽？

当组件大部分样式相同，小部分样式不相同，将小部分样式进行定制样式

2.插槽的基本使用

<slot></slot>

3.插槽添加默认值默认值

<slot>
    <button>按钮</button>
</slot>

4.如果有多个样式，同时放到组件中进行替换，则一起作为替换元素

<slot>
    <button>按钮</button>
    <button>按钮2</button>
</slot>

二、具名插槽

当使用的插槽比较多时，想替换指定的位置，那么就需要使用具名插槽

子组件给插槽命名

<slot name="left">
    左边
</slot>
<slot name="right">
    右边
</slot>

父组件使用插槽

<cpn slot="left">
    左边2
</cpn>
<cpn slot="right">
    右边2
</cpn>

三、作用域插槽

因为编译作用域的影响，使用插槽父组件无法获取子组件插槽里面的数据去决定如何渲染，那么这里就需要使用作用域插槽去解决

子组件

<slot :data="slotData">
    {{slotData}}
</slot>

父组件中去使用

<template slot-scope="slot">
    {{slot.data}}
</template>