<component> 动态组件

最后更新：2026-10-22

按数据动态切换渲染的组件或原生元素，是标签页、路由视图等的底层机制。

📝 语法

<component :is="currentView"></component>

<!-- 也可以渲染原生标签 -->
<component is="h3">动态标签</component>

props	is（组件名、组件定义对象或原生标签名字符串）

修改下面的代码，在预览区实时查看效果：

输出：

点击按钮在「组件 A」「组件 B」之间切换。

💡 提示 常见形态：标签页切换、根据类型渲染不同表单字段。

ℹ️ 说明 切换会销毁旧组件（状态丢失）；需要保留状态时包。

⚠️ 注意 若 is 的值指向未注册组件，Vue 会按原生标签渲染并可能警告。

更多案例即将上线。

Q 和 v-if 分支的区别？

A 本质相似，但动态组件由数据驱动、无需为每种情况写分支代码。

Q 能传 props 吗？

A 能：<component :is="view" :data="payload">，属性会透传给被选中组件。

Q 能在 is 里直接写定义吗？

A 可以：:is="MyComponent" 传组件定义对象，适合完全动态的场景。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。