组件中插槽的概念有点类似于模版指令中的 v-HTMl 指令。是为了给一个组件传递一些内容。
该套 API 灵感源自 webcomponents 规范草案。 将 <slot> 元素作为承载分发内容的出口。
思维导图
先看一个小案例，代码如下：
页面会显示：
在 Vue.js 中使用 slot 关键字代表插槽的意思。 就是把内容放到对应的 <slot> 占位符中。
封装一个 button 组件用 button 来讲解一下 slot 使用方式。
查看效果：
插槽不仅可以包含字符串， 还可以包含相关的 HTML 代码。 需要注意的是， 如果 template 中没有 slot 占位符， 组件中的内容将不会响应的页面上。
<!-- 组件模版 -->
<button class="btn-primary">
Create a new item
</button>
<!-- 组件调用 -->
<mz-button> 新增 </mz-button>
这个时候， button 只会显示 Create a new item 而不会响应 “新增”，该标签的包含的内容都不会响应对应的内容。
渲染作用域当在插槽中使用数据时， 插槽的访问与模版其余部分拥有相同的实例的 property，也就是有相同的作用域。
针对作用域， 这条规则请记牢：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
在 <slot> </slot> 标签内， 可以填写一个内容用来对于父组件调用的时候， 没有填写内容就使用默认值的情况。 举例说明：
查看默认值的效果。
这个在封装组件的时候很常用， 也很好用。
具名插槽具名： 可以认为是一个指定名称标志的 slot 占位符。有时候， 我们需要在一个页面中使用多个插槽， 比方说一个布局组件中， 这个时候， 我们就需要在 slot 元素上， 使用特殊的属性 name 。这个配置可以指定一个插槽的名字。 并且在不带 name 的 <slot> 上， 默认会有一个 name="default" 。
举个具名例子：
查看效果：
这里经常会用到布局结构的网页， 这样的话可以把公众部分抽出来直接替换里面的内容。 当然也可以在使用组件进行 header 的 footer 的二次封装。 这样就不用重复编写类似的代码。
注意： v-slot 只能添加在 <template> 上 。 只有当前页面中只有一个默认插槽时， 组件标签才会被当做模版使用， 其他的情况都必须在 <template> 上。
具名插槽的缩写 #跟前面说过的指令 v-on 和 v-bind 一样。 v-slot 也有对应的缩写。 就是把 v-slot: 替换成 #。例如上面的 v-slot:header 可以被重写成 #header ：
<base-layout>
<template #header>
<h1>我是页头， 这里可以是标题</h1>
</template>
<template #default>
<p>这个是页面主要内容.</p>
<p>和其他的一些说明.</p>
</template>
<template #footer>
<p>可以填写页脚信息 @2021</p>
</template>
</base-layout>
而且在使用的过程中， 缩写必须有对应的参数， 否则将无法使用。 没有自定义的情况下默认的格式为： #default
插槽的作用域在实际的开发中， 可能会遇到父组件需要访问子组件的数据， 并且可以从父组件中进行重新定义渲染的方式和内容。 在这种情况下， 我们可以指定 slot 标签的一个属性值。 这个属性值就可以在父组件中进行使用。举例说明：
打开控制台查看效果：
可以看到渲染的时候， 已经按照父组件进行渲染了。
并且在 slot 属性上可以配置多个参数。修改组件 template 代码如下：
<ul>
<li v-for="(item, index) in items">
<slot :item="item" :index="index"></slot>
</li>
</ul>
修改调用组件的代码如下：
<base-scope v-slot:default="props">
<span>{{props.index}}</span>
<span>{{props.item}}</span>
</base-scope>
刷新页面查看效果：
简单的说明一下： v-slot:defalut="props" 相当于子对象的一个引用变量。 可以使用通过插槽属性暴露出来的参数。原理是将插槽内容包括在一个传入单个参数的函数里。
function (props) {
// ... 插槽内容 ...
}
这就意味着 v-slot 的值实际上可以是任何能够作为函数定义参数的 JavaScript 表达式。并且也可以使用 ES2015 之后的解构的特性来传入具体的插槽参数名称。 举例如下：
<base-scope v-slot:default="{item, index}">
<span>{{index}}</span>
<span>{{item}}</span>
</base-scope>
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
例子为：
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
所以才可以直接使用参数的名称进行调用并使用。在这样使用上面的例子的时候， 可以使模版更加简洁。 并且这里也可以把该解构的对象进行重命名使用 冒号 ":" 进行重命名
代码举例：
<base-scope v-slot:default="{item: info, index}">
<span>{{index}}</span>
<span>{{info}}</span>
</base-scope>
暂时想到的就只有这么多的知识点了， 如果有没有涵盖的， 留言评论，加入对应的知识点。
,
