数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

一、全局注册

使用 Vue 应用实例的 app.component() 方法注册的组件叫做全局组件，可以在当前应用的任意一个组件模板中不需要引入即可使用。

main.js 中注册全局组件

import { createApp } from 'vue' import App from './App.vue' import DataModel from "./views/DataModel.vue" const app = createApp(App) app.component('DataModel',DataModel) app.mount('#app')

app.component() 方法可以被链式调用

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

main.js中批量注册全局组件

参考 Element Plus 的 Icon 系列组件的注册，使用 for…of 迭代注册组件

import * as ElementPlusIconsVue from '@element-plus/icons-vue'  const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) {  app.component(key, component) }

11.4.2 局部注册

全局注册虽然很方便，但有以下几个问题：

1. 1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
2. 2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码 (dead-code) 行为的术语。

在使用 

注：局部组件仅在当前被引入的组件内可用，而在任何的子组件或更深层的子组件中都不可用。

11.4.3 组件名格式

Vue 中推荐使用 PascalCase(帕斯卡命名法) 作为组件名的注册格式，这是因为：

PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。

在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。

在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的。

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过或引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

PascalCase：帕斯卡命名法，每个单词首字母大写，又名大驼峰命名法。如：HelloWorld

camelCase：驼峰命名法，第一个单词首字母小写，后面的每个单词首字母大写，又名小驼峰命名法。如：helloWorld

kebab-case：短横线隔开命名法，每个单词首字母小写。如：hello-world