Vue 2中的组件注册

1. 局部注册:只能在注册的组件内使用

使用场景

• 复用性较低的私有组件
• 需要按需加载优化体积时

实现步骤

（1）创建组件文件（三个组成部分）

components/HmHeader.vue：

（2）在使用的组件内导入并注册

ParentComponent.vue：

注意

• 命名冲突：避免与 HTML 原生标签名重复（如 header、button）

• 作用域：仅在当前组件及其子组件中可用

• 推荐规范：

  • 文件名：PascalCase（如 HmHeader.vue）
  • 组件名：与文件名一致，组件对象的class同名（通过 name 选项显式声明）

2. 全局注册:所有组件内都能使用

使用场景

• 高频使用的通用组件（如按钮、弹窗）
• 需要在任何位置快速调用时

实现步骤

（1）创建组件文件（三个组成部分）

components/HmButton.vue：

（2）main.js 中进行全局注册

main.js：

注意

• 体积影响：全局组件会增大初始加载包体积

• 命名唯一性：确保全局组件名不重复

• 注册时机：必须在 app.mount() 前完成注册

• 推荐规范：

  • 文件名：PascalCase-- 大驼峰命名法（如 HmHeader.vue）
  • 组件名：与文件名一致，组件对象的class同名（通过 name 选项显式声明）

---

关于组件名大小写的命名区别

中文官网： vue2组件注册详细解释