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
- Create a js file in the utils directory and call it globalComponents.js.
- NPM install –save Lodash. Some handlers need to be used.
- 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.