Vue 实现 slot 多层嵌套

在引用一些框架时，通常他们自己就已经有插槽，但有时需要对插槽进行拓展

更多精彩

• 更多技术博客，请移步 IT人才终生实训与职业进阶平台

定义基础组件，向插槽中再插入一个插槽

1. 在基础组件中引入了 Mint-UI 的 mt-header 组件
2. 并通过其提供的具名插槽向组件右侧插入内容
3. 但该组件是我们自定义的，我们并不知道组件被调用时会被插入什么内容
4. 所以在该组件中插入该具名插槽的内容也是一个插槽
5. 关键点在于这个插入的未知内容的插槽也必须是具名的

<template>
  <mt-header>
    <img class="logo" src="./images/logo.png" alt="logo" slot="left">
    <slot name="button" slot="right"></slot>
  </mt-header>
</template>

子组件引用基础组件，像二级插槽中插入具体内容，并指定二级插槽的名称

1. 在引入组件时，只需要将待插入的内容插槽名称与基础组件中覆写的插槽名称对应即可

<template>
  <div class="portal-panel">
    <in-header>
      <div class="btn-group" slot="button">
        <mt-button>登录</mt-button>
        <mt-button>注册</mt-button>
      </div>
    </in-header>
  </div>
</template>