Detailed explanation of Vue's component registration

introduction

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.

Global Registration

We can use the Vue application example()Method to make components available globally in the current Vue application.

import { createApp } from 'vue'
const app = createApp({})
(
  // Registered name  'MyComponent',
  // Component implementation  {
    /* ... */
  }
)

If using a single file component, you can register the imported one.vuedocument:

import MyComponent from './'
('MyComponent', MyComponent)

()Methods can be called chained:

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

Globally registered components can be used in the templates of any component applied here:

<!-- This is available in any component of the current application -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

All subcomponents can also use globally registered components, which means that all three components can also be used internally to each other.

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.

In contrast, partially registered components need 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.

Local registration requires usecomponentsOptions:

<script>
import ComponentA from './'
export default {
  components: {
    ComponentA
  }
}
</script>
<template>
  <ComponentA />
</template>

For eachcomponentsThe properties in the object, their key names are the registered component names, and the values ​​are the implementation of the corresponding component. The above example uses the abbreviation syntax of ES2015, which is equivalent to:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Please note:Locally registered components are not available in descendant components. In this example,ComponentARegistered only available in the current component, and not in any subcomponent or deeper subcomponents.

Component name format

Throughout the guide, we use PascalCase as the registration format for component names 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).

We recommend this in both single file components and inline 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 in 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.

This is the end of this article about the detailed explanation of Vue component registration. For more related Vue component registration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!