Vue Academy · 课时

具名插槽与默认插槽

Q: 「具名插槽与默认插槽」这节课中我会学到什么？

多个 、 ，以及简写的 #name 语法。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

多个、，以及简写的 #name 语法。

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

什么是插槽

插槽允许父组件将标记内容传入子组件。子组件使用 <slot> 元素决定这些内容出现的位置。这就是 Vue 的内容分发。

默认插槽

没有名称的 <slot> 就是默认插槽。父组件放在组件标签之间的任何内容都会显示在那里。

<!-- Card.vue -->
<div class="card">
  <slot></slot>
</div>

使用默认插槽

父组件只需将内容嵌套在组件标签内。

<Card>
  <p>This goes into the default slot</p>
</Card>

为什么需要具名插槽

许多组件有多个插入位置，例如页眉、正文和页脚。具名插槽为每个区域提供标识符，让父组件可以分别指定它们。

声明具名插槽

为每个插槽添加 name 属性。一个组件可以同时使用具名插槽和一个默认的（未命名）插槽。

<!-- Card.vue -->
<div class="card">
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</div>

使用 v-slot 填充具名插槽

在父组件中，将内容包裹在带有 v-slot:name 指令的 <template> 中，以指定具名插槽。

<Card>
  <template v-slot:header>
    <h2>Title</h2>
  </template>
  <template v-slot:footer>
    <button>OK</button>
  </template>
</Card>

# 简写形式

v-slot: 有一种简写形式：#。因此，v-slot:header 会变成 #header。这是符合惯例且简洁的写法。

<Card>
  <template #header>
    <h2>Title</h2>
  </template>
</Card>

标签之间的默认内容

直接放在组件标签之间的内容（不在具名模板内）会进入默认插槽。您也可以使用 #default 显式指定它。

<Card>
  <p>Implicit default slot content</p>
  <template #footer>Footer</template>
</Card>

混合隐式和显式写法

您可以在同一次使用中直接书写默认内容，同时通过模板提供具名插槽。Vue 会根据名称将每一部分内容放到正确的位置。

<Card>
  <template #header><h2>Header</h2></template>
  Body text right here
  <template #footer>Footer</template>
</Card>

渲染顺序

插槽在父组件中的顺序并不重要，最终布局由子组件模板控制。插槽内容总会出现在子组件放置匹配的 <slot> 的位置。

实用的布局组件

具名插槽可以构建可复用的布局外壳。一个 <BaseLayout> 就能通过接收页眉、侧边栏和主要内容插槽来承载任意页面。

<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>

快速检查

v-slot:header 的简写形式是什么？

回顾

您学习了插槽如何将父组件的标记内容分发到子组件中。无名称的 <slot> 是默认插槽；添加 name 会创建具名插槽。父组件可以使用 <template v-slot:name> 或 #name 简写来填充它们，而最终位置由子组件模板决定。

常见问题解答

「具名插槽与默认插槽」课时是免费的吗？

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

「具名插槽与默认插槽」这节课中我会学到什么？

多个、，以及简写的 #name 语法。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「具名插槽与默认插槽」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy