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

前言

Vue是目前最流行的JavaScript框架之一,它提供了一种简洁、高效的方式来构建用户界面。
在Vue中,组件是可复用的Vue实例,是构建应用程序的核心概念之一。 它可以在应用程序中被多次使用。组件可以封装HTML、CSS和JavaScript代码,在需要的时候进行复用。组件可以有自己的模板、数据、方法和生命周期钩子函数。
一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。

一、全局注册

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

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

  • 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')
    
  1. app.component() 方法可以被链式调用

    app.component('ComponentA', ComponentA)
       .component('ComponentB', ComponentB)
       .component('ComponentC', ComponentC)
    
  2. 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)
    }
    

二、局部注册

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

  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>

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

三、组件名格式

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值