Case of component name

When defining a component in a string template or a single file component, there are two ways to define the component name:

Using kebab case

app.component('my-component-name', {
  /* ... */
})

When using kebab case to define a component, you must also use kebab case when referring to this custom element, such as < My component name >.

Using PascalCase

When you define a component using PascalCase, you can use both naming methods when referring to this custom element. In other words, < My component name > and < mycomponentname > are acceptable. Note, however, that only kebab case is valid when used directly in DOM (i.e. non string templates).

Global registration

So far, we've only used app Component to create a component:

Vue.createApp({...}).component('my-component-name', {
  // ... option ...
})

These components are registered globally. That is, they can be used in the template of any newly created component instance after registration. For example:

const app = Vue.createApp({})

app.component('component-a', {
  /* ... */
})
app.component('component-b', {
  /* ... */
})
app.component('component-c', {
  /* ... */
})

app.mount('#app')

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Local registration

Global registration is often not ideal. For example, if you use a build system like webpack, registering all components globally means that even if you no longer use one of the components, it will still be included in the final build results. This has resulted in a needless increase in JavaScript downloaded by users.

In these cases, you can define components through a common JavaScript object:

 

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

Then define the components you want to use in the "components" option:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

For each property in the "components" object, its property name is the name of the custom element, and its property value is the option object of the component.

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

Or if you use the ES2015 module through Babel and webpack, the code looks like this:

Note that in ES2015 +, putting a variable name similar to "ComponentA" in the object is actually the abbreviation of "ComponentA: ComponentA", that is, the variable name is:

• The name of the custom element used in the template
• The variable name that contains this component option

Modular system

If you don't use a modular system through import/require, you may be able to skip this chapter for the time being. If you use it, we will provide you with some special instructions and precautions.

Local registration in module system

If you're still reading, you're using modular systems like Babel and webpack. In these cases, we recommend creating a "components" directory and placing each component in its own file.

Then you need to import each component you want to use before partial registration. For example, let's say in component B JS or componentb Vue# file:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

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

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

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

recommend....

Now ， ComponentA ， and ， ComponentC ， can be used in the template of ， ComponentB ，.