【Vue3 第十二章】组件注册 & 命名格式

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

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

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

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

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

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

11.4.3 组件名格式

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

1. PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
2. <PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。

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

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

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

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

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

最后

以上就是务实康乃馨为你收集整理的【Vue3 第十二章】组件注册 & 命名格式的全部内容，希望文章能够帮你解决【Vue3 第十二章】组件注册 & 命名格式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。