vue批量注册全局组件

vue批量注册全局组件

在公共组件中多次引入的问题。如某个组件使用频次在两次以上，建议注册为全局组件，以便后续开发便捷使用，防止在父组件中无休止的引入、注册带来的不便：

第一种方法：

main.js

//引入vue
import Vue from 'vue'
//引入全局组件
import componentName from ‘@/component/component’
//注册为vue全局组件
Vue.component('componentName',componentName)

//引入vue
import Vue from 'vue'
//引入全局组件
import componentName1 from ‘@/components/component’
import componentName2 from ‘@/components/component’
import componentName3 from ‘@/components/component’
...
//注册为vue全局组件
Vue.component('componentName1 ',componentName1)
Vue.component('componentName2 ',componentName2)
Vue.component('componentName3 ',componentName3)
...

实际上这种方法非常“笨”的，代码冗杂，介意第二种方法

第二种方法：

1、首先在components 中新建一个 commonComs.js（自定义命名） 文件

import Vue from 'vue'

const Coms = [{
        name: "shuffle",
        component: () =>
            import ('../components/shuffle.vue')
    },
    {
        name: "tableValid",
        component: () =>
            import ('../components/table-valid.vue')
    }
]

const vueComs = () => {
    Coms.forEach(item => {
        return Vue.component(item.name, item.component)
    })
}
export default vueComs

2、在main.js文件中引入

import Vue from 'vue'
import vueComs from './globalCom/index'  //注入
import App from './App'

vueComs()  //调用
Vue.config.productionTip = false
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})