Vue Academy · 课时

作用域插槽：向父组件传递数据

Q: 「作用域插槽：向父组件传递数据」这节课中我会学到什么？

slot :data='value'、父组件中的 v-slot='{ data }'，以及渲染属性模式。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

slot :data='value'、父组件中的 v-slot='{ data }'，以及渲染属性模式。

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

普通插槽的局限

普通插槽允许父组件向下传递标记内容，但父组件无法访问子组件的内部数据。作用域插槽解决了这个问题：子组件可以将数据向上暴露给插槽内容。

在插槽上绑定数据

子组件会在其 <slot> 元素上绑定属性，这些属性称为插槽属性。它们会传递给父组件渲染的内容。

<!-- List.vue -->
<ul>
  <li v-for="(item, i) in items" :key="item.id">
    <slot :item="item" :index="i"></slot>
  </li>
</ul>

接收插槽属性

在父组件中，v-slot 的值会变成一个对象，其中包含子组件绑定的所有插槽属性。

<List :items="users">
  <template v-slot:default="slotProps">
    {{ slotProps.index }}: {{ slotProps.item.name }}
  </template>
</List>

解构插槽属性

由于插槽值只是一个对象，您可以直接对它进行解构，让代码更加简洁。

<List :items="users">
  <template v-slot:default="{ item, index }">
    {{ index }}: {{ item.name }}
  </template>
</List>

默认作用域插槽的简写

如果只使用默认插槽，可以直接将 v-slot 放在组件标签上，而不必使用嵌套模板。

<List :items="users" v-slot="{ item }">
  {{ item.name }}
</List>

重命名和默认值

解构支持重命名和默认值，就像普通 JavaScript 一样。

<template v-slot:default="{ item: user, index = 0 }">
  {{ index }} - {{ user.name }}
</template>

具名作用域插槽

具名插槽也可以具有作用域。将名称与解构后的属性结合使用即可。

<DataTable :rows="rows">
  <template #cell="{ value, column }">
    <strong>{{ column }}: {{ value }}</strong>
  </template>
</DataTable>

无渲染组件

作用域插槽支持无渲染组件模式：组件负责处理逻辑和状态，但不渲染自己的标记内容，而是通过作用域插槽暴露数据，让父组件决定界面。

无渲染鼠标跟踪器

该组件会跟踪光标并暴露坐标。它只渲染默认插槽，同时传递 x 和 y。

<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>

使用无渲染组件

父组件提供所有视觉内容并读取暴露的数据，从而完全将逻辑与展示分离。

<Mouse v-slot="{ x, y }">
  <p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>

作用域插槽与组合式函数

在 Vue 3 中，对于纯逻辑复用，组合式函数通常可以替代无渲染组件。但当子组件必须控制迭代或结构（例如列表或表格），而父组件需要自定义每个项目时，作用域插槽仍然更有优势。

快速检查

父组件如何接收作用域插槽暴露的数据？

回顾

您学习了作用域插槽如何通过在 <slot> 上绑定属性，将数据向上暴露给父组件。父组件通过 v-slot 的值读取这些属性（通常会进行解构），从而实现将逻辑与展示分离的无渲染组件。

常见问题解答

「作用域插槽：向父组件传递数据」课时是免费的吗？

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

「作用域插槽：向父组件传递数据」这节课中我会学到什么？

slot :data='value'、父组件中的 v-slot='{ data }'，以及渲染属性模式。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「作用域插槽：向父组件传递数据」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy