vue组件中的API有三个，分别是props，events与slot。前两个分别为传参和触发事件，slot实现的是内容分发。最近使用elementUI中的组合搜索框或者添加其他自定义内容时会用到此属性。它相当于AngularJS中的transclusion，意为插槽。
vue中的组件，可谓是相当重要的内容。slot的主要作用就是组件的组合，用来扩展组件。简单来说：
<bigbig> <smallsmall></smallsmall> </bigbig>
这样将两个自定义的组件组合起来，父组件<bigbig>也许会有自己的模板，这样<smallsmall>在里面就很尴尬，它需要一个明确的定义如何显示。此时便需要使用slot。
1.单个slot
它的含义指的就是组件模板中包含一个slot。就上个例子来说，如果<bigbig>不包含<slot>，那么<bigbig>自己本身模板中的内容将会被抛弃，只显示<smallsmall>。如果包含slot，那么<smallsmall>将会插入<slot>的内容中并且替换掉它。<slot>标签中也可以携带内容，当没有内容插入时，将显示slot标签中的内容。举个例子：
假定组件<bigbig>有如下模板：
<div> <p>我是组件里自带的段落~</p> <slot>如果没有需要插入的内容，就显示我啦~</slot> </div>
现在我们要渲染以下代码：
<bigbig> <p>我是需要渲染的内容~</p> </bigbig>
将显示什么结果呢？答案是先显示“我是组件里自带的段落~”再显示“我是需要渲染的内容~”。因为我们已经将其插入slot中了，并替换掉了slot中的内容。如果我们没有需要插入的内容，则会显示slot原本中的内容“如果没有需要插入的内容，就显示我啦~”
2.具名slot
它的含义简单来说就是带有名字的slot。当插槽不止一个时，为了区分他们，则需要带上名字，用法和单个slot本质上是一样的。
假定组件<bigbig>有如下模板：
<div> <slot name=‘one’></slot> <slot></slot> <slot name=‘two’></slot> </div>
接下来渲染：
<bigbig> <p slot='one'>111</p> <p slot='two'>222</p> <p>code</p> </bigbig>
渲染结果为：111 code 222 。对应名称插入到对应的插槽。
3.作用域插槽
作用域插槽本质上是可以传递数据的插槽，类似于函数的传参。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。以下示例代码为转载：
<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id"
>
<!-- 我们为每个 todo 准备了一个插槽，-->
<!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
<slot v-bind:todo="todo">
<!-- 回退的内容 -->
{{ todo.text }}
</slot>
</li>
</ul>
<todo-list v-bind:todos="todos">
<!-- 将 `slotProps` 定义为插槽作用域的名字 -->
<template slot-scope="slotProps">
<!-- 为待办项自定义一个模板，-->
<!-- 通过 `slotProps` 定制每个待办项。-->
<span v-if="slotProps.todo.isComplete">✓</span>
{{ slotProps.todo.text }}
</template>
</todo-list>
来源：https://www.cnblogs.com/tomatoto/p/9633631.html