VUE封装全局组件
今天想来总结一下vue中全局组件的封装。全局组件相对于局部组件不需要挂载,而局部组件则需要手动挂载,否则,没有效果。
第一步
在src下创建一个index.js
export default {
install(Vue) {
const components = require.context('@/components', true, /index.(js|vue)$/)
components.keys().forEach(item => {
const component = components(item).default;
console.log(component)
if (component.name) {
Vue.component(component.name, component)
} else {
this.installGroupComponent(Vue, component)
}
})
},
installGroupComponent(Vue, components) {
Object.keys(components).forEach(key => {
Vue.component(components[key].name,components[key])
})
}
}
第二步
在main.js中引入
import BaseComponents from "./public/index.js"
Vue.use(BaseComponents )
之后,就可以使用组件了…