vue通过插件批量注册全局组件

vue一般注册全局组件

//在main文件中引入需要注册的全局组件

import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'

//逐个注册引入的组件, 获取应用实例对象app
const app = createApp(App)
//其中第一个参数为全局组件名(写在模板/template中,),第二个参数为引入的组件名
app.use("SvgIcon",SvgIcon)

vue通过插件进行注册全部全局组件

1:新建一个Ts或Js文件,并引入你想要设置的全局变量组件

import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'

2:设置全局对象：将所有全局对象都放入一个对象中

const allGloablComponent: Component = { SvgIcon, Pagination }

3:对外默认暴露一个对象,并调用插件默认调用的install方法,并传入app实例

// 注册所有icon图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入ts类型
import type { App, Component } from 'vue';

export default {
    // 调用插件默认调用install方法，并且传入app实例
    install(app: App) {
        Object.keys(allGloablComponent).forEach((key: string) => {
            // 注册全局组件
            app.component(key, allGloablComponent[key])
        })
        
        // 注册所有icon图标
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
    }


}

• 当app注册该组件时,会注入一个app实例并且调用install方法,
• Object.keys(allGloablComponent)：获取全局对象的key，放入到一个数组中
• 
• 在JavaScript中，可以使用“ . ”和“ [ ] ”来访问对象的属性。
• 在JavaScript中，只能用“ . ”来访问对象的方法。
• 其中 allGloablComponent[key] 并不是数组的意思,而是对象写法的第二种形式,即对象的属性值为变量的写法

最后在main文件中引入文件即可,然后app注册以下就完成了

若以后还有很多组件需要注册全局组件,引入后直接放入allGloablComponent对象中就可以了