什么是slot

slot是插槽，运用于组件之中，作为备用，添加需要临时添加的html代码。

1、匿名插槽与具名插槽

首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。
下面通过一个例子来展示。

匿名插槽：

父组件:
	<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>item1</span>
              <span>item2</span>
            </div>
        </child>
    </div>
 </template>

子组件：
<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

具名插槽：

父组件：
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div slot='header' class="tmpl">
              <span>item1---1</span>
              <span>item2---1</span>
            </div>
             <div slot='footer' class="tmpl">
              <span>item3---1</span>
              <span>item4---1</span>
            </div>
            <p>
               匿名插槽的模板
             </p>
        </child>
    </div>
</template>

子组件
<template>
     // 具名插槽
     <slot name="header"></slot>
     // 具名插槽
     <slot name="footer"></slot>
     // 匿名插槽
      <slot></slot>
<template>

父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

2、作用域插槽

作用域插槽可以理解为带数据的插槽，因为作用域的限制，子组件在使用的过程中没法访问父组件的值，例子如下：
这是一个<current-user>组件

<span>
  <slot>{{ user.lastName }}</slot>
</span>

如果想把显示lastName换成显示firstName,如果执行以下代码，内容并不会生效。

<current-user>
  {{ user.firstName }}
</current-user>

这是因为user是子组件的数据，作用域只局限于子组件，在父组件中使用,user并不会取得子组件中的值。

修改一下<current-user>组件,将 user 作为<slot>元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

v-slot:default="slotProps"可以简写为v-slot=“slotProps”,他只针对匿名插槽进行prop传输，如果是具名插槽,则需要写成v-slot:具名="otherslotProps"的形式，而且，匿名插槽和具名插槽不可嵌套使用，例如以下代码，具名插槽不能使用匿名插槽的值：

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

解构插槽

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
ES2015解构语法：{ 属性 } = 对象；（对象中需要有该属性）

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

3、作用域插槽使用过程中的关键点：

在第一次理解的时候，其实不能理解为什么v-slot=‘任意名称’，这个任意名称的对象 就可以访问组件中的任意内容，其实他的实现很简单，举例：

<current-user>
  <template v-slot="slotProps">
    {{slotProps.user}}
  </template>
</current-user>

其实这是把current-user这个组件中的prop赋给了slotProps这个对象，所有的v-slot都是相同的含义，将包含这个插槽的组件中的prop赋予slotProps对象，因此slotProps对象的名字并不重要，相当于一个声明，可以是’aaa’,‘bbb’,'ccc’等任意内容。

4、关于slot-scope

作用域插槽在2.6.0版本以前使用slot-scope atrribute,2.6.0版本之后改成了v-slot:default=“scope”(匿名插槽)，v-slot:具名=“scope”(具名插槽)，来定义需要使用数据的插槽。