slot⼜名插槽，是Vue的内容分发机制，组件内部的模板引擎使⽤slot元素作为承载分发内容的出⼝。插槽slot是⼦组件的⼀个模板标签元素，⽽这⼀个标签元素是否显示，以及怎么显示是由⽗组件决定的。

小示例

// 父组件
 <TestSlot> 我是放在父组件的数据 </TestSlot>

// 子组件模板
<template>
    <div id="testSlot">
        <slot></slot>
    </div>
</template>

当组件渲染的时候，<slot></slot> 将会被替换为“我是放在父组件的数据”。

<!-- 渲染 HTML -->
<div id="testSlot">
    我是放在父组件的数据
</div>

插槽还可以包含任何模板代码，包括 HTML,或其他组件

如果 <TestSlot> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

渲染作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

插槽不能访问 <TestSlot> 的作用域。例如，尝试访问 action 将不起作用：

<TestSlot action="delete"> {{ action }}</TestSlot>

控制台会给出警告：Property “action” was accessed during render but is not defined on instance.

备用内容

有时为一个插槽指定备用 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

// 父组件
<TestSlot></TestSlot>
 
// 子组件
<button type="submit">
  <slot>Submit</slot>
</button>

<!-- 渲染 HTML -->
<button type="submit">
  Submit
</button>

具名插槽

<slot> 元素有一个特殊的 attribute：name。通过它可以为不同的插槽分配独立的 ID，也就能够以此来决定内容应该渲染到什么地方,一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

// base-layout子组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

要使 子组件中的数据在父级提供的插槽内容上可用，我们可以添加一个 <slot> 元素并将其作为一个 attribute 绑定：

// 子组件TestSlot
<ul>
      <li v-for="(item, index) in items" :key="index">
        <slot
          :nickName="item.name"
          :avatar="item.avatar"
          :skills="item.skills"
          :weakness="item.weakness"
          >loss of data</slot
        >
      </li>
</ul>

// 父组件
<TestSlot>
    <template v-slot:default="slotProps">
        <img
        :src="slotProps.avatar"
        alt=""
        style="width: 100px; height: 100px"
        />
        <p>{{ slotProps.nickName }}</p>
        <p>{{ slotProps.skills }}</p>
        <p>{{ slotProps.weakness }}</p>
    </template>
</TestSlot>

独占默认插槽的写法

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<todo-list v-slot="slotProps">
  <i class="fas fa-check"></i>
  <span class="green">{{ slotProps.item }}</span>
</todo-list>

解构插槽

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

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

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。因此你也可以使用 ES2015 解构 来传入具体的插槽 prop，如下：

<todo-list v-slot="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

// 重命名
<todo-list v-slot="{ item：todo }">
  <span class="green">{{ item }}</span>
</todo-list>

// 定义备选内容
<todo-list v-slot="{ item = "Placeholder" }">
  <span class="green">{{ item }}</span>
</todo-list>

动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

具名插槽缩写

<todo-list #default="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>