Vue Academy · 课时

使用 render 函数实现动态组件

Q: 「使用 render 函数实现动态组件」这节课中我会学到什么？

按类型切换组件、解析组件，以及在 render 函数中保留插槽 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

按类型切换组件、解析组件，以及在 render 函数中保留插槽

第 3 / 4 课13 个步骤

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

渲染函数中的动态组件

模板使用 <component :is="..."> 在运行时切换组件。在渲染函数中，您可以使用解析辅助函数和 h 实现相同效果。

resolveComponent

resolveComponent 会根据组件的注册名称查找全局或局部注册的组件，并返回该组件供 h 使用。

import { h, resolveComponent } from "vue";

export default {
  render() {
    const Btn = resolveComponent("MyButton");
    return h(Btn, null, () => "Click");
  }
};

resolveDynamicComponent

当目标可能是注册名称、HTML 标签或组件对象时，请使用 resolveDynamicComponent。它可以处理这三种情况。

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

从属性决定类型

通过属性传入组件名称，并在每次渲染时解析它。这相当于渲染函数版本的 :is。

export default {
  props: { type: String },
  render() {
    const Comp = resolveDynamicComponent(this.type);
    return h(Comp, { msg: "hi" });
  }
};

转发属性

将传入的属性展开到已解析的组件上，这样动态子组件就能接收到父组件获得的所有内容。

setup(props, { attrs }) {
  return () => h(
    resolveDynamicComponent(props.type),
    { ...attrs }
  );
}

转发插槽

插槽通过 h 的第三个参数传递给子组件。请直接转发父组件的插槽对象，这样动态组件就能渲染这些插槽。

setup(props, { slots }) {
  return () => h(
    resolveDynamicComponent(props.type),
    null,
    slots
  );
}

可复用的渲染器

结合属性和插槽转发，就能构建一个轻量包装器：它按名称渲染任意组件，同时将所有内容继续传递下去。

setup(props, { attrs, slots }) {
  return () => h(
    resolveDynamicComponent(props.is),
    attrs,
    slots
  );
}

动态列渲染器

数据表通常允许每一列指定自己的渲染器组件。请为每列保存组件名称，并为每个单元格解析对应组件。

const columns = [
  { field: "name", renderer: "TextCell" },
  { field: "price", renderer: "MoneyCell" }
];

动态渲染单元格

对于每一列，请解析其渲染器，并将单元格值作为属性传入。一个循环就能处理不同类型的单元格。

render() {
  return h("tr", null,
    columns.map((col) =>
      h("td", null, [
        h(resolveDynamicComponent(col.renderer), {
          value: this.row[col.field]
        })
      ])
    )
  );
}

回退到标签

如果 resolveDynamicComponent 接收到未注册的名称，它会将其视为原生元素字符串，因此 "div" 可以安全地渲染为真正的 div。

h(resolveDynamicComponent("div"), { class: "box" }, "fallback");

为什么在这里使用渲染函数

当结构需要计算得出时，渲染函数尤其有用，例如子节点数量可变、每个项目使用不同的组件类型，或逻辑需要大量嵌套的模板条件判断。

快速检查

当目标可能是组件名称 OR 原生 HTML 标签时，哪个辅助函数可以安全地解析它？

在交互式课程中回答

回顾

对于已注册的名称，请使用 resolveComponent；当目标也可能是 HTML 标签或组件对象时，请使用 resolveDynamicComponent。将 attrs 作为属性转发，并将 slots 对象作为第三个 h 参数传入。这种模式支持动态数据表列渲染器和灵活的包装器。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 42
课程: 156

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

常见问题解答

「使用 render 函数实现动态组件」课时是免费的吗？

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

「使用 render 函数实现动态组件」这节课中我会学到什么？

按类型切换组件、解析组件，以及在 render 函数中保留插槽你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「使用 render 函数实现动态组件」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy