【Vue3 ✨】Vue3 入门之旅 · 第九篇：Vue3 插槽机制

本篇文章将深入探讨 Vue3 的插槽机制，帮助你理解如何利用插槽进行组件内容分发，使得组件更加灵活和可复用。

---

目录

1. 什么是插槽
2. 插槽的基本使用
3. 具名插槽
4. 作用域插槽
5. 插槽的嵌套和默认插槽
6. 小结

---

什么是插槽

插槽是 Vue 提供的一种机制，它允许我们在父组件中将内容插入到子组件的预定义位置，从而实现组件的内容分发。插槽机制使得组件之间可以更加灵活地传递数据或内容，同时也增强了组件的复用性。

插槽的作用

• 内容分发：插槽允许父组件向子组件传递内容，子组件则可以决定如何展示这些内容。
• 组件复用：通过插槽，子组件可以复用相同的布局，并允许父组件控制子组件的内容展示。
• 灵活的布局：插槽能够帮助我们创建具有动态内容展示能力的复杂组件。

---

插槽的基本使用

在 Vue 中，我们通过 slot 标签来定义插槽。父组件可以在子组件中定义插槽内容，然后由子组件展示。

1. 基本插槽

在子组件中，我们使用 <slot></slot> 来定义插槽位置。

<!-- 子组件 -->
<template><div class="card"><slot></slot> <!-- 默认插槽 --></div>
</template><script setup>
defineProps();
</script>

父组件中，可以在 <my-card> 组件标签内直接传入内容：

<!-- 父组件 -->
<template><my-card><h2>这是卡片标题</h2><p>卡片内容部分</p></my-card>
</template>

输出效果：

<div class="card"><h2>这是卡片标题</h2><p>卡片内容部分</p>
</div>

---

具名插槽

具名插槽允许你为插槽指定一个名称，以便父组件向多个插槽传递不同的内容。这对于构建复杂组件非常有用。

1. 在子组件中使用具名插槽

<!-- 子组件 -->
<template><div class="card"><header><slot name="header"></slot> <!-- 具名插槽 --></header><main><slot></slot> <!-- 默认插槽 --></main></div>
</template>

2. 在父组件中传递具名插槽内容

父组件可以通过 slot 的 name 属性将内容传递给具名插槽。

<!-- 父组件 -->
<template><my-card><template v-slot:header><h2>这是卡片标题</h2></template><p>这是卡片的主要内容</p></my-card>
</template>

输出效果：

<div class="card"><header><h2>这是卡片标题</h2></header><main><p>这是卡片的主要内容</p></main>
</div>

---

作用域插槽

作用域插槽是一种特殊的插槽，它允许子组件将一些数据暴露给父组件，父组件通过插槽接收数据并进行渲染。

1. 定义作用域插槽

在子组件中，我们通过 slot 标签的 v-bind 指令向父组件传递数据。

<!-- 子组件 -->
<template><div class="list"><slot :items="items"></slot> <!-- 传递数据 --></div>
</template><script setup>
const items = ['Item 1', 'Item 2', 'Item 3'];
</script>

2. 在父组件中使用作用域插槽

父组件可以通过 v-slot 来接收子组件传递的数据。

<!-- 父组件 -->
<template><my-list v-slot:default="{ items }"><ul><li v-for="item in items" :key="item">{{ item }}</li></ul></my-list>
</template>

在这个例子中，父组件通过 v-slot:default 接收了子组件传递过来的 items 数据，并渲染列表。

---

插槽的嵌套和默认插槽

插槽不仅可以用来传递单个内容，它还可以嵌套使用，使得父组件可以向子组件传递多层次的内容。默认插槽可以不指定名称，只有一个默认的内容。

1. 嵌套插槽

<!-- 子组件 -->
<template><div class="card"><header><slot name="header"></slot></header><main><slot></slot> <!-- 默认插槽 --></main><footer><slot name="footer"></slot></footer></div>
</template>

2. 父组件嵌套插槽

父组件可以将不同的内容传递给不同的插槽，包括默认插槽和具名插槽。

<!-- 父组件 -->
<template><my-card><template v-slot:header><h2>卡片标题</h2></template><p>卡片内容部分</p><template v-slot:footer><p>卡片页脚</p></template></my-card>
</template>

输出效果：

<div class="card"><header><h2>卡片标题</h2></header><main><p>卡片内容部分</p></main><footer><p>卡片页脚</p></footer>
</div>

---

小结

在本篇文章中，我们学习了 Vue3 插槽机制，并通过多个示例深入探讨了如何使用默认插槽、具名插槽和作用域插槽。通过插槽，我们可以更加灵活地设计组件的内容分发，使得组件具有更强的复用性和可维护性。

插槽是 Vue 提供的一种强大机制，它使得父子组件之间的数据传递更加灵活，帮助我们构建更高效的 UI 组件。

在接下来的文章中，我们将介绍 Vue3 动态组件与异步组件，帮助你更好地处理组件的动态渲染和懒加载。

---

📘 下一篇，我们将介绍 Vue3 动态组件与异步组件，让你学会如何在 Vue3 中实现动态组件渲染和异步加载。