app.component() 全局注册组件

最后更新：2026-10-22

app.component() 全局注册组件：所有组件模板都能直接使用，适合按钮、图标等基础组件。

📝 语法

app.component("my-btn", { template: "<button><slot></slot></button>" })

name, component?	组件名 + 组件定义（只传名字时返回已注册组件）

返回值：应用实例（可链式调用）

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

输出：

渲染出一个按钮，文字为「全局按钮」。

⚠️ 注意 全局注册无法被 tree-shaking 剔除：大型项目优先局部注册。

💡 提示 只在基础 UI（按钮/图标/卡片）上使用，业务组件一律局部注册。

ℹ️ 说明 在真实项目里通常在入口文件统一注册，注意要在 mount 之前。

更多案例即将上线。

Q 和局部注册的取舍？

A 用到即注册（局部）更清晰、可摇树；基础组件才全局。

Q 组件名有什么要求？

A 多词 kebab-case（DOM 模板）或 PascalCase（SFC），避免单词名撞原生标签。

Q 注册后改名会怎样？

A 后注册的会覆盖先前的同名组件（开发环境有提示）。

Web-Tutorial 技术团队

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