插槽 slot

组件中插槽的概念有点类似于模版指令中的 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>

暂时想到的就只有这么多的知识点了， 如果有没有涵盖的， 留言评论，加入对应的知识点。