【vue3|第29期】Vue3中的插槽：实现灵活的组件内容分发

日期：2024年10月24日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、插槽分类
- 1、默认插槽（Default Slot）
- 2、具名插槽（Named Slots）
- 3、作用域插槽（Scoped Slots）
三、完整示例
四、结语

在这里插入图片描述

一、前言

在 Vue3 中，插槽（Slots） 是一种允许开发者在组件内部定义可替换内容的机制。即通过插槽，开发者在组件内部预留“空白区”，供父组件填充自定义内容。这不仅增强了组件的通用性和复用性，还实现了父组件对子组件内容的精确控制。

二、插槽分类

1、默认插槽（Default Slot）

默认插槽（也称为匿名插槽，无名插槽）是最常见的插槽类型，用于放置普通的 HTML 内容或子组件。如果一个组件没有指定具名插槽，那么所有的内容都会被视为默认插槽的内容。

假设我们有一个子组件 ChildComponent.vue，它包含一个默认插槽：

<template>
  <div>
    <h2>我是子组件的标题</h2>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

在父组件中，我们可以这样使用它：

<template>
  <ChildComponent>
    <p>这是通过默认插槽插入的内容</p >
  </ChildComponent>
</template>

渲染后的HTML结构将是：

<div>
  <h2>我是子组件的标题</h2>
  <p>这是通过默认插槽插入的内容</p >
</div>

2、具名插槽（Named Slots）

允许在组件中定义多个插槽，并为每个插槽指定一个唯一的名称。父组件可以通过 v-slot 指令指定内容应该渲染到哪个具名插槽中。在 Vue3 中，也可以使用 # 来简化 v-slot 指令，像 <template #header> 这样的写法。

当我们需要在一个组件中定义多个插槽时，具名插槽就派上用场了。下面是一个包含头部和尾部具名插槽的子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot> <!-- 具名插槽 -->
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot> <!-- 具名插槽 -->
    </footer>
  </div>
</template>

在父组件中，我们可以这样插入内容：

<template>
  <ChildComponent>
    <template v-slot = "header">
      <h1>这是头部具名插槽的内容</h1>
    </template>
    <p>这是默认插槽的内容</p >
    <template #footer>
      <p>这是尾部具名插槽的内容</p >
    </template>
  </ChildComponent>
</template>

渲染后的HTML结构将是：

<div>
  <header>
    <h1>这是头部具名插槽的内容</h1>
  </header>
  <main>
    <p>这是默认插槽的内容</p >
  </main>
  <footer>
    <p>这是尾部具名插槽内容</p >
  </footer>
</div>

3、作用域插槽（Scoped Slots）

允许父组件访问子组件的数据。通过在子组件的插槽上定义属性，父组件可以接收这些属性，并在插槽内容中使用它们。

作用域插槽允许子组件向父组件传递数据，父组件可以根据这些数据来决定如何渲染内容。下面是一个简单的例子：

子组件 ChildComponent.vue：

<template>
  <div>
    <slot :user="user"></slot> <!-- 作用域插槽 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const user = ref({ name: 'Commas', age: 30 });
</script>

在父组件中，我们可以这样使用作用域插槽：

<template>
  <ChildComponent v-slot:default="slotProps">
    <p>用户名: {{ slotProps.user.name }}</p >
    <p>年龄: {{ slotProps.user.age }}</p >
  </ChildComponent>
</template>

渲染后的HTML结构将是：

<div>
  <p>用户名: Commas</p >
  <p>年龄: 30</p >
</div>

三、完整示例

假设我们要创建一个 可自定义的按钮组件（Button.vue），它包含主文本和图标两个部分，如下所示：

<!-- Button.vue -->
<script setup>
import { ref } from 'vue';
</script>

<template>
  <div class="button">
    <slot name="text">默认文本</slot>
    <slot name="icon">
      <!-- 默认图标 -->
      <i class="material-icons">add</i>
    </slot>
  </div>
</template>

父组件使用：

<template>
  <Button>
    <template #text>定制文本</template>
    <template #icon>
      <i class="material-icons">delete</i>
    </template>
  </Button>
</template>