封装全局组件

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.installGropComponent(Vue, component)
            }
        })
    },
    installGroupComponent(Vue, components) {
        Object.keys(components).forEach(key => {
            Vue.component(key,components[key])
        })
    }
}

第二步

在main.js中引入

 import BaseComponents from "./public/index.js"
  Vue.use(BaseComponents )

之后，就可以使用组件了…