vue3 自定义插件注册的妙用：一次性注册所有全局组件

代码搬运媛2024-04-01 18:54

在项目的开发过程中，我们经常会注册很多公共的组件，以增强代码的可维护性，减少开发工作量。但是如果我们一个个去注册的话，就会在入口处写很多代码，这时我们就可以考虑使用自定义插件的方法一次性把所有的组件全部注册。具体方法如下：

（1）在src/components 下新建一个 index.ts，引入所有全局组件

ts 复制代码

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';

//全局对象
const allGloablComponent: any = { SvgIcon, Pagination }

//对外暴露插件对象
export default {
    install(app: App) {
    	//注册项目全部的全局组件
        Object.keys(allGloablComponent).forEach((key: string) => {
        	//注册为全局组件
            app.component(key, components[key]);
        })
    }
}

（2）在入口文件 main.ts 中安装自定义插件

ts 复制代码

//引入自定义插件对象:注册整个项目全局组件
import gloalComponent from '@/components';
app.use(gloalComponent)

（3）最后就是在你想用的任何地方随意使用组件啦，再也不用一次次的引入啦