【Vue3 Chapter 12】Component Registration and Naming Format

Preface

VueIt's the most popularJavaScript FrameworkOne, it provides a simple and efficient way to build a user interface.
In Vue,ComponentsIt is a reusable Vue instance and is one of the core concepts for building applications. It can be used multiple times in the application. Components can encapsulate HTML, CSS andJavaScriptCode, reused when needed. Components can have their own templates, data, methods and lifecycle hooksfunction。
A Vue component needs to be "registered" before use, so that Vue can find its corresponding implementation when rendering a template. There are two ways to register components: global registration and local registration.

1. Global registration

Using Vue application instances()The component registered by the method is called a global component, which can be used without introducing any component template in the current application.

Digital management platform
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Permission System-Mall
Personal blog address

• Register global components

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  AI writing code

2. ()Methods can be called chained

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

   • 1
   • 2
   • 3
   AI writing code

3. Bulk registration of global components

   refer toElementRegistering the Icon series components of Plus, using for…of to iterate the components

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

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   AI writing code

2. Local registration

Although global registration is very convenient, there are several problems:

1. Components that are globally registered but not used cannot be automatically removed during production packaging (also called "tree-shaking"). If you register a component globally, it will still appear in the packaged JS file even if it is not actually used.
2. Global registration makes the dependencies of the project less clear in large projects. When using child components in parent components, it is not easy to locate the implementation of child components. Like using too many global variables, this may affect the long-term maintainability of the application.

By comparison,A partially registered component needs to be explicitly imported in the parent component that uses it and can only be used in that parent component. Its advantage is that it makes dependencies between components more explicit and tree-shaking friendly.

Tree shakingIs a term commonly used to describe the behavior of removing unreferenced code (dead-code) in JavaScript context.

In use<script setup>In the single file component, the imported components can be used directly in the template without registration:

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

<template>
  <ComponentA />
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

AI writing code

Note: Local components are only available within the currently introduced components, and are not available in any subcomponent or deeper subcomponents.

3. Component name format

In Vue, PascalCase (Pascal Nomenclature) is recommended as the registration format for component names., this is because:

1. PascalCase is a legal JavaScript identifier. This makes it easy to import and register components in JavaScript, and the IDE can also provide better automatic completion.
2. <PascalCase />It is more obvious in the template that this is a Vue component, rather than a native HTML element. It can also distinguish Vue components from custom components (web components).

In single file components andInlineWe recommend this in string templates. However, the tag name of PascalCase is not available in the DOM template.

For convenience, Vue supports parsing tags in templates using kebab-case into components registered with PascalCase. This means aMyComponentComponents registered with the name can be passed in the template<MyComponent>or<my-component>Quote. This allows us to use the same JavaScript component registration code to match templates from different sources.

PascalCase: Pascal nomenclature, the first letter of each word is capitalized, also known as the big camel nomenclature. For example: HelloWorld

camelCase: CamelCase: CamelCase, the first letter of the first word is lowercase, and the first letter of each word is uppercase, also known as the CamelCase. For example: helloWorld

kebab-case: short horizontal lines separate nomenclature, the first letter of each word is lowercase. For example: hello-world