21. 组件注册

组件需要先注册才能用

Vue 组件定义好了不算完，还得告诉 Vue “这个标签对应哪个实现”。这就是注册。

全局注册

用 app.component() 注册后，整个应用随处可用：

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

const app = createApp({})
app.component('MyComponent', MyComponent)

可以链式调用：

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

全局注册的组件能在任何组件的模板里使用，包括子组件里。

全局注册的问题

全局注册用起来很方便，但有几个缺点：

• 打包体积大——注册了没用到的组件不会被 tree-shaking 移除，会留在最终 bundle 里
• 依赖关系不清晰——父组件用了某个组件，你很难一眼看出它从哪来
• 命名冲突风险——多了容易撞名

局部注册

局部注册只让组件在当前组件里可用，依赖关系清晰，也支持 tree-shaking。

在 <script setup> 中，直接 import 就能用，无需额外注册：

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

<template>
  <ComponentA />
</template>

非 <script setup> 时用 components 选项：

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  }
}

components 对象的键是注册的标签名，值是组件实现。上面的写法是 ES2015 简写，等价于：

export default {
  components: {
    ComponentA: ComponentA
  }
}

全局 vs 局部怎么选

对比维度	全局注册	局部注册
可用性	整个应用	仅当前组件
tree-shaking	不支持	支持
依赖清晰度	不清晰	清晰
适用场景	高频通用组件	大多数情况

实践中，大多数组件都应该局部注册。只有那些”到处都要用”的通用组件（比如 Button、Icon）才考虑全局注册。

组件命名规范

Vue 社区约定用 PascalCase 注册组件：

app.component('MyComponent', MyComponent)

好处有两个：

• PascalCase 是合法的 JavaScript 标识符，import 和注册都方便
• 在模板里一眼能和原生 HTML 元素区分开

不过 Vue 也支持 kebab-case 标签名来引用 PascalCase 注册的组件：

<!-- 以下两种写法等价 -->
<MyComponent />
<my-component />

在 SFC 字符串模板和 .vue 文件里，两种都行。直接在 DOM 里写模板时只能用 kebab-case。

本节回顾

• 全局注册：app.component(name, component)，整个应用可用
• 局部注册：<script setup> 中 import 即用，依赖关系清晰
• 局部注册支持 tree-shaking，推荐优先使用
• 命名用 PascalCase，模板中可用 kebab-case 引用