Vue Academy · 课时

动态插槽名称

Q: 「动态插槽名称」这节课中我会学到什么？

v-slot:[dynamicName]、以编程方式选择插槽，以及条件渲染插槽。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

v-slot:[dynamicName]、以编程方式选择插槽，以及条件渲染插槽。

第 3 / 4 课13 个步骤

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

为什么使用动态插槽名

有时直到运行时才能知道要填充的插槽，这取决于属性、状态或循环变量。Vue 允许您使用方括号语法计算插槽名称。

动态参数语法

在 v-slot: 后使用方括号包裹表达式。Vue 会计算该表达式，以确定目标插槽名称。

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

使用方括号的简写

# 简写也支持动态参数。

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

由状态驱动名称

方括号中的表达式可以读取任意响应式值。切换变量会改变内容填充的插槽。

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

切换渲染内容

结合定义了多个具名插槽的子组件，动态名称可以根据状态让同一个模板显示不同区域。

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

从属性中选择名称

组件属性可以决定插槽。这对于可配置的包裹组件很有用，因为调用方可以选择要使用的区域。

const props = defineProps({ target: String });
// use props.target inside #[props.target]

迭代动态插槽

您可以通过根据每个循环项目计算名称，在循环中渲染插槽。这对于表格列或标签页系统很有用。

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

小写且有效的名称

动态插槽名称应解析为有效字符串。空值会被视为默认插槽。在内联模板中使用时，请避免空格以及 HTML 属性名称中无效的字符。

const name = condition ? "primary" : null;
// null -> default slot

条件式选择插槽

在方括号中使用三元表达式，可以根据条件在不同插槽之间进行选择，而且全部在模板中完成。

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

标签页组件的使用场景

标签页组件可以根据所选标签页的 id 计算插槽名称，从而渲染当前标签页的内容，同时保持父组件的声明式写法。

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

保持可读性

动态插槽功能强大，但可能会掩盖代码意图。当插槽集合确实由数据驱动时，动态插槽很合适；如果只有固定的少量插槽，普通具名插槽的可读性更好。

快速检查

哪种语法可以选择名称在运行时计算出的插槽？

在交互式课程中回答

回顾

您已学习动态插槽名称可以使用括号语法 v-slot:[expr] 或 #[expr]，根据 props 或状态计算要填充的插槽，从而实现可配置的包裹组件、选项卡系统和数据驱动的列渲染。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 42
课程: 156

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

常见问题解答

「动态插槽名称」课时是免费的吗？

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

「动态插槽名称」这节课中我会学到什么？

v-slot:[dynamicName]、以编程方式选择插槽，以及条件渲染插槽。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「动态插槽名称」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy