Vue 组件注册详解：全局注册 vs 局部注册

在使用 Vue 开发应用时，组件化开发 是最核心的思想之一。组件让页面结构更加清晰、复用性更强，也方便团队协作。但是在真正使用组件之前，我们需要先把它们"注册"到应用中。

这篇文章会带你系统了解 Vue 组件的注册方式，包括 全局注册 和 局部注册，并结合实际项目的特点来分析它们的优缺点和适用场景。

为什么要注册组件？

在模板中写下时，Vue 需要知道它对应的实现逻辑，否则 Vue 会把它当成一个普通的 HTML 标签。

因此，注册的过程就是告诉 Vue：这个名字对应的就是我写的某个组件实现。

Vue 提供了两种方式来完成注册：

全局注册：在应用启动时就声明，任何组件都能直接使用。
局部注册：只有在某个父组件中显式导入后才能使用。

一、全局注册

全局注册通常发生在应用的入口文件（比如 main.js 或 main.ts）中。

使用方式非常简单：调用应用实例的 .component() 方法。

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.component('MyComponent', {
  /* 组件实现 */
})

如果使用单文件组件（SFC），我们可以直接导入：

js 复制代码

import MyComponent from './MyComponent.vue'

app.component('MyComponent', MyComponent)

支持链式调用：

js 复制代码

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

这样一来，ComponentA、ComponentB 和 ComponentC 就可以在应用中的任意模板中使用了：

js 复制代码

<template>
  <ComponentA />
  <ComponentB />
  <ComponentC />
</template>

全局注册的优点

使用方便：不用在每个父组件里单独导入。
统一管理：常用的 UI 组件（比如 Button、Dialog）适合全局注册。

全局注册的缺点

Tree-shaking 不友好：即使组件没有用到，也会被打包进最终的文件。
依赖关系模糊：在大型项目中，很难快速判断某个组件的来源，增加了维护成本。

因此，在中大型项目中，不推荐滥用全局注册。

二、局部注册

相比全局注册，局部注册更强调依赖关系的明确性。

只有在父组件中显式导入的组件，才能在该父组件里使用。

方式一：配合

**这是 Vue 3 推荐的写法。只需要导入组件，就能直接在模板里使用，无需显式 components 配置：

js 复制代码

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
<ComponentA />
</template>

方式二：使用

components

选项

如果不用

js 复制代码

import ComponentA from './ComponentA.vue'

export default {
components: {
ComponentA
}
}

等价写法（更显式）：

js 复制代码

export default {
components: {
ComponentA: ComponentA
}
}

⚠️ 注意：局部注册的组件只在当前组件内可用，不会传递给子组件。

三、组件命名规范

Vue 官方推荐使用 PascalCase（大驼峰） 来注册组件名称：

js 复制代码

app.component('MyComponent', MyComponent)

这样做的好处有：

合法的 JavaScript 标识符，IDE 自动补全体验更好。
在模板中一看就是 Vue 组件，而不是原生 HTML 标签。
不过，Vue 模板对大小写做了兼容：

注册时用 MyComponent
模板里既可以写也可以写
这让我们能兼容不同风格的模板来源（比如 DOM 模板 vs 单文件组件）。

四、实际项目中的选择

什么时候用全局注册？

基础 UI 库：如 Button、Input、Modal 这种高复用度的基础组件。
插件或第三方库：比如 Element Plus、Naive UI 等，它们的组件一般都是全局注册的。

什么时候用局部注册？

业务组件：和某个页面强绑定的组件，不需要被全局引用。
中大型项目：更强调依赖关系清晰，避免全局命名冲突。
通常来说，小型项目可以多用全局注册 ，而中大型项目应尽量使用局部注册，全局注册只留给真正的通用组件。

五、总结

全局注册：一次注册，到处可用，但会增加打包体积和依赖不透明。
局部注册：父组件显式导入，依赖清晰，支持 tree-shaking，更适合中大型项目。**