vue3插槽学习——起步（一）_顶部导航 vue3-CSDN博客

本文介绍了Vue3中插槽Slot的使用，包括认识插槽、如何使用插槽、基本使用方法、默认内容以及传递多个标签的效果。通过实例解析了如何通过插槽提高组件的通用性，允许父组件自定义组件内部的展示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、slot

① 认识插槽Slot

在开发中，我们会经常封装一个个可复用的组件：
- 前面我们会通过props传递给组件一些数据，让组件来进行展示；
- 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；
- 比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；
- 们应该让使用者可以决定某一块区域到底存放什么内容和元素；
举个栗子：假如我们定制一个通用的导航组件 - NavBar
- 这个组件分成三块区域：左边-中间-右边，每块区域的内容是不固定；
- 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示；
- 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等；
- 右边可能是一个文字，也可能是一个图标，也可能什么都不显示；

② 如何使用插槽slot？

这个时候我们就可以来定义插槽slot：
- 插槽的使用过程其实是抽取共性、预留不同；
- 我们会将共同的元素、内容依然在组件内进行封装；
- 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；
如何使用slot呢？
- Vue中将元素作为承载分发内容的出口；
- 在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽；
- 该插槽插入什么内容取决于父组件如何使用；

③ 插槽的基本使用

我们一个组件MySlot.vue：该组件中有一个插槽，我们可以在插槽中放入需要显示的内容：

<template>
  <div>
    <h2>组件开始</h2>
    <slot />
    <h2>组件结束</h2>
  </div>
</template>

<script> export default {} </script>

我们在App.vue中使用它们：我们可以插入普通的内容、html元素、组件元素，都可以是可以的：

<template>
  <div>
    <my-slot>
      <button>我是按钮</button>
    </my-slot>
  </div>
</template>

<script> // 导入组件
import MySlot from './MySlot.vue'

export default {
  components: {
    MySlot
  }
} </script>

页面效果：

注意：
- 像之前如果不添加插槽的话，如果在子组件标签中写入内容，页面并不会渲染出来，只需要在组件中添加一个<slot/>插槽，那么就会将内容渲染出来。
- 除了像上面给插槽传递标签或者文本，也可以传递组件

④ 插槽的默认内容

有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：
- 当然这个默认的内容只会在没有提供插入的内容时，才会显示：
```
<template>
  <div>
    <h3>组件开始</h3>
    <slot>
      <i>我是插槽的默认内容</i>
    </slot>
    <h3>组件结束</h3>
  </div>
</template>

<script> export default {} </script> 
```

⑤ 传递多个标签

Ⅰ. 单个插槽的效果

如果子组件中只有一个slot插槽，但是父组件中任然可以传递多个标签内容，子组件都会渲染出来的：

MySlot.vue子组件代码同上

App.vue父组件中的代码：

<template>
  <div>
    <my-slot>
      <h3>我是 h3</h3>
      <h4>我是 h4</h4>
      <h5>我是 h5</h5>
    </my-slot>
  </div>
</template>

<script> // 导入组件
import MySlot from './MySlot.vue'

export default {
  components: {
    MySlot
  }
} </script>