Vue component organization structure and component registration details

1. Component Organization

Typically an application is organized as a nested component tree:

For example, we may have components such as headers, sidebars, and content areas, each of which may contain other components such as navigation links and blog posts.

In order to be used in templates, these components must first be registered so that Vue can recognize them. There are two types of component registration: global registration and local registration.

So far, our components are all registered globally through Vue.component :

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

Globally registered components can be used in any newly created Vue root instance (via new Vue ) after they are registered, including the templates of all child components in their component tree.

2. Component name

When registering a component, we always need to give it a name. For example, we have seen this when registering globally:

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

The component name is the first parameter of Vue.component

2.1 Component Naming

There are two ways to define component names:

• Hyphen-separated names: my-component-name
• Capitalize the first letter of the name: MyComponentName


Hyphen separated names

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

When defining a component using (hyphen separated names), for example: <my-component-name></my-component-name>


Capitalize the first letter

Vue.component('MyComponentName', { /* ... */ })

When defining a component using (capitalized first letter), you can use either naming convention when referencing the custom element. That is, both <my-component-name> and <MyComponentName> are acceptable.

Note: However, only hyphen-delimited names are valid when used directly in the DOM (i.e. non-string templates).

3. Global Registration

Global registration is to use Vue.component to create components:

Java
Vue.component('my-component-name', {
  // ... options...
})

These components are registered globally. This means that they can be used in the template of any newly created Vue root instance ( new Vue ) after registration.

for example:

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

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

new Vue({ el: '#app' })

However, global registration is not often used in actual projects.

4. Partial Registration

Global registration is often suboptimal. For example, if you use a build system like webpack , registering all components globally means that even if you no longer use a component, it will still be included in your final build. This results in an unnecessary increase in the amount of JavaScript that users have to download.

In these cases, you can define the component via a plain JavaScript object:

let ComponentA = {
    template: `<p>hello</p>`
  }
let ComponentB = {
  template: `<p>world</p>`
}

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

new Vue({
  el: '#app',
  components:
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

For each property in the components object, the property name is the name of the custom element, and the property value is the options object for this component.

Of course, in the actual development process, we use the module system to register more components, which will be introduced later.

This is the end of this article about the organizational structure of Vue components and the details of component registration. For more relevant Vue component organizational structure and component registration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!