In the actual development, when we registered components and plug-ins, we found that some of those plug-ins and components would recommend us to use vue.use () method for registration, and some would recommend us to use vue.component (). Today, I will briefly talk about my personal understanding of these two registration methods

Sign up with Vue.com Ponent ()

First of all, most of the customizations we registered with Vue.component() were customizations that we needed to use globally, so we registered them in main.js. Vue.component() accepts two arguments

The first parameter is the custom element name, which is the tag name for the component to use in other components in the future. The second parameter is the Vue component to be registered.Copy the code

1. Register a user-defined component

For example, I now want to register a global component

First I need to define this component in the components global component folder

Then register globally in our main.js file

  import topTitle from '@/components/topTitle'
  
  Vue.component('topTitle', topTitle) 
  
  // Vue.component(toptitle.name, topTitle) can be registered this way if name is defined in the component
Copy the code

This allows us to use this component directly in other global components

2. Register multiple custom components

When we need to register multiple components, if they are written to main.js, it will cause a bloated and messy main.js file, then what should we do?

Vue.use() registration and vue.component () registration and vue.comPonent () registration

Use Vue. Use () to register

In general development, vue. use() method is commonly used to register vue. use(Router), vue. use(element-ui), etc

import ElementUI from 'element-ui'

import Router from 'vue-router'

Vue.use(Router)

Vue.use(Element-ui)
Copy the code

So how are these components or plug-ins different from our own custom components?

To answer this question, we first need to know what argument vue.use () receives

The plug-in is first registered with vue.use. This method receives an object. And this parameter must have the install method.

Here we create a demo js file

Then we import our own component and export an object by default, which has a method called Install

import topTitle from '@/components/topTitle'
export default {
  install(V) {
   console.log(V)
   console.dir(V)
    V.component(topTitle)
  }
}
Copy the code

Import and register this method in main.js

import yanshi from './ demo '
Vue.use(yanshi)
Copy the code

Start the project and look at the incoming value of the install method printed by the console. After reading the printed value, it is estimated that some of your friends will understand

Yes, the received value here is our Vue instance

The install method of the parameter is called internally by the vue. use function and the Vue instance is passed in

To make it more obvious, we can do a comparison. Let’s first instantiate Vue and then do a comparison. It turns out that true means the two are the same thing

With an instance of vue inside the install method, you can add global methods or properties, global directives, add instance methods, register components with Vue.component(), and so on

This is why some components or plug-ins can be registered directly with vue.use () because they have an install method registered internally. In order to avoid the result of duplicate registration, we will be reminded of the registration method

Vue.use() registration differs from vue.component () registration in an insatll method

At this point, you know how to do global registration of a large number of custom components

We can create a js file, import all components that need to be registered globally, directly export an object with install(Vue) method by default, directly use Vue.component() to register, and then register the js file in main.js

Vue.use() registration differs from vue.component () registration by insatll, but the internal connection between the two is not discussed at this time, and the constructor pointing problem between the two is discussed in the next article

If there is something wrong in the end, we welcome your criticism and correction, and also hope you can give us more praise!!