Use to register Vue global components and global commands, usevue

Use to register Vue global components and global commands, usevue

Vue components and Commands include local components, local commands, global components, and global commands. When you register a certain number of global commands and global components, the methods in the official documentation are somewhat refreshing.

Global Components

Vue. component (tagName, options) is used to create a global component. However, this method is written in the same file as the root instance. If you want to register multiple global components at the same time, the root instance file will be too heavy. Therefore, Vue is used. use () to "Install" global components, it looks lighter.

Method:

1. Create a New plugins folder

2. Create the components. js file in the folder where the global components are placed.

3. Introduce all global components to be registered in the components. js file.

4. In the app. js root instance file, introduce components. js

Take the eg component as an example:

Components. js:

import eg from '../components/eg.vue';export default (Vue)=>{ Vue.component("Eg",eg);}

App. js:

import components from './plugins/components.js';Vue.use(components);

After writing the above, we registered the global component Eg.

When you need to register multiple global components, it is even more refreshing to use this method!

Global commands

For the registration of global commands, the official documentation provides a way to use Vue. directive () is also located in the root instance file. The problem arises. If multiple global commands and multiple global components are added, then the app. js files will become bloated.

Therefore, the method for registering global components is similar to that for registering global components. Vue. use () is also used to "Install" Global commands.

Method:

1. Create a New plugins folder

2. Create the directives. js file in the folder to place global components.

3. Introduce all global commands to be registered in the directives. js File

4. In the app. js root instance file, introduce directives. js

Take the v-focus command as an example:

Directives. js:

export default (Vue)=>{ Vue.directive("focus",{  inserted:function(el){   el.focus();  } })}

App. js

import directives from "./plugins/directives.js"Vue.use(directives);

In this way, the global command is registered.

The above method of using use to register Vue global components and global commands is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.