0. Intro

Component Registration | Vue.js (vuejs.org)

为什么要 register component？

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

如何 register？

两种方法：local 或者 global。

1. Global Registration

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

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

Drawbacks

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({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

Example - with SFC

我们要 register 的是 imported .vue files.

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Example - chained

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

Example - usage

<!-- this will work in any component inside the app -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

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 里面无效。

Benefits

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.

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

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

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).

kebab-case

使用 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.