Vue Academy · 课时

插槽回退内容与插槽检查

Q: 「插槽回退内容与插槽检查」这节课中我会学到什么？

默认插槽内容、使用 useSlots() 检查是否提供插槽，以及条件渲染。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

默认插槽内容、使用 useSlots() 检查是否提供插槽，以及条件渲染。

第 4 / 4 课13 个步骤

插槽回退内容与插槽检查 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

插槽回退内容

<slot> 可以包含默认标记。如果父组件为该插槽提供了内容，则优先使用父组件的内容；如果没有提供，则渲染插槽中的回退内容。

定义回退内容

将默认内容放在插槽标签之间。这是可选插槽的一种优雅默认方式。

<!-- Button.vue -->
<button>
  <slot>Submit</slot>
</button>

回退内容的实际效果

如果父组件没有传入任何内容，就会显示“提交”。如果父组件传入了内容，该内容就会覆盖回退内容。

<Button />            <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->

具名插槽的回退内容

具名插槽同样支持回退内容。当父组件省略页眉插槽时，可以默认显示标准标题。

<header>
  <slot name="header">
    <h2>Default Title</h2>
  </slot>
</header>

空包裹元素的问题

有时您只希望在父组件确实提供了插槽内容时，才渲染包裹元素（例如页脚容器）。为此，您必须检查插槽是否存在。

useSlots 可组合函数

在 <script setup> 中，useSlots() 会返回一个对象，其键是已提供的插槽名称。每个值都是一个返回插槽虚拟节点的函数。

import { useSlots } from "vue";
const slots = useSlots();

检查是否传入了插槽

调用插槽函数，并检查内容是否为真值。只有当父组件提供了该插槽时，slots.header 才会存在；调用 slots.header?.() 可以安全地返回其虚拟节点。

const hasHeader = computed(() => !!slots.header);

有条件地渲染包裹元素

将此检查与 v-if 结合使用，让包裹元素只在存在内容时出现，从而避免生成空的 DOM 节点。

<header v-if="slots.header">
  <slot name="header" />
</header>

为什么使用可选链

slots.header?.() 可以防止插槽未定义。如果不使用可选链，调用未定义的插槽就会抛出错误。这种模式常见于渲染函数和计算属性检查中。

const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }

模板中的 $slots

模板通过 $slots 暴露相同的数据。您可以直接在 v-if 中检查 $slots.footer，而无需导入 useSlots。

<footer v-if="$slots.footer">
  <slot name="footer" />
</footer>

综合运用

健壮的卡片组件只在相应插槽被提供时渲染各个部分，从而保持标记整洁、样式表现一致。

<div class="card">
  <header v-if="$slots.header"><slot name="header" /></header>
  <div class="body"><slot /></div>
  <footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>

快速检查

在 script setup 中，如何检查父组件是否提供了“header”插槽？

在交互式课程中回答

回顾

您已学习插槽可以包含回退内容，并在父组件省略该插槽时进行渲染。若要有条件地渲染包裹元素，请在 script setup 中使用 useSlots()（slots.header?.()）检查插槽是否存在，或在模板中检查 $slots.header。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「插槽回退内容与插槽检查」课时是免费的吗？

是的 — 「插槽回退内容与插槽检查」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「插槽回退内容与插槽检查」这节课中我会学到什么？

默认插槽内容、使用 useSlots() 检查是否提供插槽，以及条件渲染。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「插槽回退内容与插槽检查」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy