什么是插槽

我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。

这是官方文档对于插槽的定义，但我觉得插槽就是一个组件对外的接口一种，同样的还有Props和Events,它不但能接受文本，还能接收组件。比如我们封装一个button，然后显示文字，我们有这两个写法

<a-button :title="something" />
<a-button>something</a-button>

第一种更符合vue组件的写法，第二种则更符合html的直觉。

定义插槽

插槽既然是子组件的一个对外接口，那么自然要在子组件里定义。我们在aButton这个组件里要标记一下插槽的位置，也就是入口。

//aButton.vue
<template>
    <button>
        <slot></slot>
    </button>
</template>

我们可以想象成，父组件传入的任何模板或者组件都会替换slot，这个slot其实是一个虚拟的标记罢了。

通过使用插槽，子组件组件更加灵活和具有可复用性。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的基本功能。

想象一下，我们需要搭配一套衣服，那么就会有上衣，裤子，鞋子，帽子等等。把人想象成一个子组件，每一种衣服都是一个插槽，我们需要在不同的位置替换不同的衣服，因此我们需要给插槽一个名字，一个标记，这就是具名插槽.vue中通过给slot添加name属性来区分插槽

//aButton.vue
<template>
    <button>
        <slot name="left"></slot>
        <slot name="right"></slot>
    </button>
</template>

当我们使用的时候，稍微有点不同，我们需要指定某一部模板是对应哪个插槽

<a-button>
    <template v-slot:left> <!-- header 插槽的内容放这里 --> </template>
    <template #right> <!-- header 插槽的内容放这里 --> </template>
</a-button>

其中v-slot可以简写为井号，意思就是指对应插槽的名字。

使用插槽可以简化我们很多子组件，例如最常用的布局组件Layout，我们可以通过具名插槽指定位置，然后调整基本的样式，这样子组件就只需要沾满空间就行了