Luna Tech

Tutorials For Dummies.

Vue: Component Registration


0. Intro

Component Registration | Vue.js (

为什么要 register component?

因为假如 Vue 需要 render 这个 component,必须知道这个 component 的 location。

如何 register?

两种方法:local 或者 global。

1. Global Registration

通过 app.component() method 来让 component globally available。

global registered component 之间可以互相使用。


While convenient, global registration has a few drawbacks:

  1. Global registration prevents build systems from removing unused components (a.k.a “tree-shaking”). If you globally register a component but end up not using it anywhere in your app, it will still be included in the final bundle.
  2. Global registration makes dependency relationships less explicit in large applications. It makes it difficult to locate a child component’s implementation from a parent component using it. This can affect long-term maintainability similar to using too many global variables.

Example - without SFC

import { createApp } from 'vue'

const app = createApp({})

  // the registered name
  // the implementation
    /* ... */

Example - with SFC

我们要 register 的是 imported .vue files.

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Example - chained

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

Example - usage

<!-- this will work in any component inside the app -->

This even applies to all subcomponents, meaning all three of these components will also be available inside each other.

2. Local Registration

通过 components option 实现,key 是 component name,value 是 component implementation。

For each property in the components object, the key will be the registered name of the component, while the value will contain the implementation of the component.

Locally registered components 在子 component 里面无效。


Local registration 1) scopes the availability of the registered components to the current component only. It 2) makes the dependency relationship more explicit, and 3) is more tree-shaking friendly.

Example - ES2015 property shorthand

Note: In this case, ComponentA will be made available to the current component only, not any of its child or descendent components.

import ComponentA from './ComponentA.vue'

export default {
  components: {

  <ComponentA />

Example - explicit


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

3. Component Naming Casing

推荐:用 SFC 的时候,用 PascalCase names 来 register component


  1. PascalCase names are valid JavaScript identifiers. This makes it easier to import and register components in JavaScript. It also helps IDEs with auto-completion.
  2. <PascalCase /> makes it more obvious that this is a Vue component instead of a native HTML element in templates. It also differentiates Vue components from custom elements (web components).


使用 PascalCase 注册的 component,Vue 可以解析 kebab-case tag。

比如:用 MyComponent 注册的话,可以在template里面用<MyComponent> 或者 <my-component> 来 reference。

This allows us to use the same JavaScript component registration code regardless of template source.