实现手动注册全局组件和批量注册全局组件

首先我们先来手动注册一个全局组件

1.创建组件 - 文件名.vue
2.引入组件
import 组件对象 from '路径'
3. 全局注册组件
Vue.component('组件名', 组件对象)

然后直接在你想要使用的文件当做标签使用

批量注册全局组件

这样注册一个两个全局组件还好, 但在工作中不可能只有这么点全局组件, 如果有几十,上百个?

这时候就不得不说一个牛逼的方法来批量注册了

先把代码给大家看看吧

//公共文件夹/index.js导出

export default {
    install(Vue) {
        // require.context webpack提供的方法
        // require.context('文件路径', 深层次查找[bool值],匹配的文件后缀)
        
        //requireComponent  得到一个函数
        const requireComponent = require.context('./', true, /\.vue$/)
        
        // requireComponent 函数中有 keys 方法
        // requireComponent.keys() 包含了你所有的公共组件
        requireComponent.keys().forEach(item => {
            const moduleDefault = requireComponent(item).default
            Vue.component(moduleDefault.name, moduleDefault)
        })
    }
}

// 然后main.js中 引入

import piugin from '@/components'
Vue.use(piugin)

来说一说刚才我们用到的方法吧

先了解了解 vue中的一个全局Api: Vue.use()

官网是是这样说的:

Vue.use( plugin )

• 参数：

  • {Object | Function} plugin

• 用法：

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。