526互联

vue3自定义组件全局注入

发布时间 2023-12-12 22:32:50作者: HuangBingQuan
/**
 * 自定义组件全局注入
 * @param app vue实例
 */
import { defineAsyncComponent } from "vue";
export default function (app) {
    // 收集@/components所有.vue组件
    const components = import.meta.glob('@/components/*/*.vue');
    for(let [key, value] of Object.entries(components)) {
        let _Name = key.split('/');
        _Name = _Name[_Name.length - 1].replace(/\.vue$/, "");
        // 生成组件的名字
        const componentName = `XiaoQuan-${_Name}`;
        // 注入
        app.component(componentName, defineAsyncComponent(value));
    }
}