0Pricing
Vue Academy · 课时

插槽与作用域插槽

使用插槽和作用域插槽组合灵活的组件

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

什么是插槽

插槽允许父组件将内容注入子组件模板。

  • Props 传递数据，插槽传递标记
  • 非常适合布局包装器、卡片和模态框
  • 子组件决定内容放置的位置

默认插槽

子组件使用 slot 元素定义占位位置。父组件放在标签之间的任何内容都会填入该位置。

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

使用默认插槽

父组件在组件标签之间传递内容。

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

插槽回退内容

插槽可以提供回退内容，在父组件未传入任何内容时显示。

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

多个具名插槽

具名插槽允许组件提供多个内容插入点。

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

填充具名插槽

父组件在模板标签上使用 v-slot:name 指定具名插槽。

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

v-slot 简写

v-slot 有一种简写形式：# 符号。

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

作用域插槽

作用域插槽允许子组件将数据传递给插槽内容。

  • 子组件在插槽元素上绑定数据
  • 父组件将其作为 slot props 接收
  • 当子组件控制数据而父组件控制外观时非常有用

从子组件公开数据

子组件在插槽上绑定属性，以共享数据。

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

使用作用域插槽数据

父组件通过 v-slot 接收数据。

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

何时使用哪种插槽

快速指南：

  • 默认插槽用于简单的内容注入
  • 具名插槽用于多个区域（布局）
  • 作用域插槽用于父组件需要子组件内部数据的情况

快速检查

测试您对插槽的理解。

回顾：插槽

您学会了使用插槽分发内容：

  • 默认插槽注入来自父组件的标记
  • 未传入任何内容时显示回退内容
  • 具名插槽（v-slot:name，简写形式为 #）指定相应区域
  • 作用域插槽将子组件数据向上传递给插槽内容

下一节：响应式基础。

常见问题解答

「插槽与作用域插槽」课时是免费的吗？

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

「插槽与作用域插槽」这节课中我会学到什么？

使用插槽和作用域插槽组合灵活的组件 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「插槽与作用域插槽」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 创建与注册组件
  2. Props 与自定义事件
  3. 插槽与作用域插槽
← 返回 Vue Academy