【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> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在 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>

四、结语

---

通过本文的探讨，我们不仅领略了 Vue3 插槽的强大功能，更深入理解了其在构建高性能、高复用性 UI 组件中的关键作用。通过默认插槽、具名插槽和作用域插槽，开发者可以定义组件的结构，并允许父组件自定义这些结构。这些机制使得Vue组件更加灵活和可重用。

---

参考文章：

• 《Vue 3 官方文档 - 插槽》
• 《Vue Composition API - 使用指南》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/143206817