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

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

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

为什么要注册组件？

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

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

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

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

一、全局注册

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

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

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

const app = createApp(App)

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

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

import MyComponent from './MyComponent.vue'

app.component('MyComponent', MyComponent)

支持链式调用：

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

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

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

全局注册的优点

• 使用方便：不用在每个父组件里单独导入。

• 统一管理：常用的 UI 组件（比如 Button、Dialog）适合全局注册。

全局注册的缺点

• Tree-shaking 不友好：即使组件没有用到，也会被打包进最终的文件。

• 依赖关系模糊：在大型项目中，很难快速判断某个组件的来源，增加了维护成本。

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

二、局部注册

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

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

方式一：配合

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

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}

export default {
  components: {
    ComponentA: ComponentA
  }
}

app.component('MyComponent', MyComponent)