Vue 插槽有哪几种

1. 默认插槽
2. 具名插槽
3. 作用域插槽

v-slot 可以 简写为 #，即 v-slot:header 可以 简写为 #header

默认插槽

直接 <slot></slot> 引用，插槽内可以包含任何模板代码

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

// Header.vue 组件
<template>
  <ul>
    <li>首页</li>
    <li>报表管理</li>
    <li>
      <slot></slot>
    </li>
  </ul>
</template>

// 引用Header.vue 组件的页面
<template>
  <div id="app">
    <Header>
      系统管理
    </Header>
    <router-view/>
  </div>
</template>

 具名插槽

需要多个插槽时可以使用具名插槽

// 子组件 Header.vue
<template>
  <section>
    <!-- 默认插槽  default 可省略 -->
    <div>
      <slot name='default'></slot>
    </div>
    <!-- 这里是图标 -->
    <div>
      <slot name='logo'></slot>
    </div>
    <!-- 这里是菜单 -->
    <div>
      <slot name='menu'></slot>
    </div>
    <!-- 这里是登录用户 -->
    <div>
      <slot name='user'></slot>
    </div>
  </section>
</template>

// 父组件
<template>
  <div id="app">
    <Header>
      aaa
      <template v-slot:logo>我是logo</template>
      <template v-slot:menu>我是菜单</template>
      <template v-slot:user>我是用户</template>
    </Header>
    <router-view/>
  </div>
</template>

作用域插槽

作用域插槽的工作原理时将你的插槽包裹在一个拥有单个参数的函数里

function (slotProps) {

        // 插槽内容

}

<!-- 子组件 -->
<template>
  <section>
    <!-- 默认插槽 -->
    <slot v-bind:user="user"></slot>
  </section>
</template>

<!-- 父组件 -->
<template>
  <div id="app">
    <Header>
        <!-- default 可以省略写成 v-slot="slotProps", slotProps名称可自定义 -->
      <template v-slot:default="slotProps">
        {{slotProps.user.name}}
      </template>
    </Header>
    <!-- 只有一个插槽时，可以省略template -->
    <!--
    <Header v-slot:default="slotProps">
      {{slotProps.user.name}}
    </Header>
    -->
  </div>
</template>