Introduction: In vUE, for some components with high reuse, in order to avoid frequent import… Import operation, we can register it as global component, next, let’s do something together, right -> disk it (register global component).

  • First of all, there are two ways, I call it manual and automatic way, manual gu Ming incredible is the kind of meaning of EMMM, we all understand, automatic estimation also understand. I can use code to explain as much as POSSIBLE in the code BB, OK, up!

Basic work

  1. Create a js file in the utils directory and call it globalComponents.js.
  2. NPM install –save Lodash. Some handlers need to be used.
  3. I’m going to create components in the components directory, where I’m going to register them globally and I’m going to prefix them with Base.
<! -- the main. Js file - >import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

// Third-party libraries
import _ from 'lodash' 

Vue.use( _ )

// Global components
import GL_Component from '@/utils/globalComponents'

Vue.use(GL_Component);

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h= > h(App)
}).$mount('#app')

Copy the code

Mode 1(Manual registration)

<! --globalComponents.js-->/ / introduction
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'

function plugins (Vue) {
  / / register
  Vue.component('BaseComponentA',BaseComponentA); // First parameter: component name, second parameter: component to register
  Vue.component('BaseComponentB',BaseComponentB);
}
export default plugins;
Copy the code

or

<! --globalComponents.js-->/ / introduction
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'

const plugins = {
   / / register
    install(Vue) {
        Vue.component('BaseComponentA',BaseComponentA); // First parameter: component name, second parameter: component to register
        Vue.component('BaseComponentB',BaseComponentB); }}export default plugins;
Copy the code

Then import the globalComponents. Js file vue.use () from the main.js entry file. Then use kebab-case in the component that needs to be applied and reference it directly in the template. I will post the diagram at the end, later.


Mode 2(Automatic Registration)

<! --globalComponents.js-->const plugins = {
  install(Vue) {
    const requireComponent = require.context(
      // The path of the component directory relative to the current js file
      '.. /components'.// Whether to query the subdirectory
      false.// A regular expression that matches the underlying component file name (so it is important to register component name conventions as global components)
      /Base[A-Z]\w+\.(vue)$/
    )
    requireComponent.keys().forEach(fileName= > {
      // console.log(fileName) ./BaseComponentA.vue
      // Get the component configuration
      const componentConfig = requireComponent(fileName) // componentConfig contains all the information about the component corresponding to fileName
      // Get the PascalCase name of the component
      const componentName = _.upperFirst( // where _ represents the lodash instance object introduced in main.js
        _.camelCase(
          // Get a file name independent of directory depth
          fileName
          .split('/')
          .pop()
          .replace(/\.\w+$/.' ') // will.(including.) The character following the character is replaced by ''))// Globally register components
      Vue.component(
        componentName,
        // If the component option is exported via 'export default',
        // Then '.default 'is preferred,
        // Otherwise fall back to the root of the use module.
        componentConfig.default || componentConfig
      )
    })
  }
}

export default plugins;

Copy the code

Application in Components

That’s how you register global components in VUE. It’s not too difficult, but I’d like to add a few more comments, mainly suggestions.

  • It is recommended to use a registration method that exposes the install() method.
  • PascalCase(uppercase) is recommended for component names and kebab-case(dash delimited) for references in templates.

END

Cloud for the car xi wind for the horse, jade in the mountain Xi LAN in the wild.