（一）前言

【MDN】HTML <slot>元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的DOM树，并将它与其它的组件组合在一起。

Vue 代码中的 slot 是什么，简单来说就是插槽。<slot> 元素作为组件模板之中的内容分发插
槽，传入内容后 <slot> 元素自身将被替换。

（二）插槽分类及使用

插槽分为三种：默认插槽、具名插槽以及作用域插槽。

• 默认插槽

# 定义插槽, child.vue
<template>
    <slot>默认内容</slot>
</template>

#使用 parent.vue
<template>
     <child>
           <template>My Content...</template>
      </child>
</template>

<!-- 独占默认插槽的缩写 -->
<child>
    <template #default="slotProps"></template>
</child>

• 具名插槽: 顾名思义，就是给插槽起一个名字，方便区分和使用。

# 定义具名插槽，命名为 content
<template>
      <slot name="content">默认内容</slot>
</template>

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

• 作用域插槽:

# 定义作用域插槽，命名为 content
<template>
      <slot name="content" :user="user" :getUserName="getUserName">默认内容</slot>
</template>
<script>
export default {
    data() {
        user: {name: ''}
    }
    methods: {
        getUserName() {
              console.log(this.user.name);
        }
    }
}
</script>

v-slot的缩写是#，但是如果使用#的话，必须始终使用具插槽来代替
<template #default="slotProps"></template>