vue3使用插件,对外暴露的方式实现全局组件的注册

440 阅读1分钟

通常我们注册全局组件是这样:

vue2

vue.component('name',component.name)

vue3

app.component('name',component.name)

但是这样如果我们有多个组件要注册成全局组件,那我们需要重复引入多次所以我们使用插件对外暴露对象的方式解决这一问题

  1. 首先我们需要在component文件夹下创建index.ts文件
  2. 将下面的代码粘贴到文件中: Object.keys(allGloablComponent)是获取到的是所有要注册成全局组件的组件的**数组**集合

import SvgIcon from "./SvgIcon.vue";
//引入要注册的全局组件(SvgIcon示例,以你的项目为准)
const allGloablComponent = {SvgIcon}
export default {
    install(app) {
        // 注册项目的全部组件
        Object.keys(allGloablComponent).forEach(key=>{
            app.component(key,allGloablComponent[key])
        })
    }
}

3.在项目的main.ts中引入插件

//引入自定义的插件对象,注册整个项目的全局组件
import GlobaComponents from "@/components/index.ts"

app.use(GlobaComponents)