vue3实现全局注册组件

1. 定义全局注册的方法
2. 在main.ts/js中全局引入定义好的方法 并 调用它
3. 在组件中通过`<component is='组件名称(无须导入，写对应的字符串类型的组件名称即可)'></component>` 
4. 代码详情
5. 

// 定义全局注册组件方法
// 1. 引入vue中的方法
import { defineAsyncComponent } from "vue"

// 2.定义对象 实现方法
const registerComponent = {
    // 定义方法
    install(app) {
        // 批量读取并能导入组件
        let readSrcComponent = import.meta.glob("@/components/*/index.vue");
        // console.log(readSrcComponent);
        /* 
            "/src/components/MyButton/index.vue"
            "/src/components/Text/index.vue"
            ...
        */
        // 获取 readSrcComponent对象中 所有的key值 
        const keys = Object.keys(readSrcComponent)
        // console.log(keys);
        // ['/src/components/MyButton/index.vue', '/src/components/Text/index.vue',...] 
        // 获取readSrcComponent对象中所有的value值
        const values = Object.values(readSrcComponent)
        // console.log(values);
        /* 
        [
            () => import("/src/components/MyButton/index.vue")
            () => import("/src/components/Text/index.vue")
        ]
        */
        // 遍历对象 实现批量注册组件
        keys.forEach((item, index) => {
            // console.log(item);
            /* 
                /src/components/MyButton/index.vue
                /src/components/Text/index.vue
            */
            // 使用正则替换 原始内容 获取文件名称 一个小括号代表一个$ $1(/src/components) $2(MyButton ... 符合规范的) $3(index.vue)
            const componentName = item.replace(/(\/src\/components\/)([a-zA-Z]+)(\/index\.vue)/, '$2')
            // console.log(componentName); //  MyButton Text ... 
            // 根据index下标 获取value中对应的路径
            const component = values[index]
            // console.log(component);  () => import("/src/components/MyButton/index.vue") ...
            // 调用 app参数 实现全局注册组件
            app.component(componentName, defineAsyncComponent(component))
        })

        // 跟上面方法一样 实现组件样式的全局注册
        // 批量读取并导入所有 组件样式组件
        let readSrcPropComponent = import.meta.glob("@/components/*/prop.vue")
        // console.log(readSrcPropComponent);
        // 所有的key值
        const propKeys = Object.keys(readSrcPropComponent)
        // console.log(propKeys);
        // 获取所有的value值
        const propValues = Object.values(readSrcPropComponent)
        // console.log(propValues);
        // 循环遍历对象实现全局注册样式组件
        propKeys.forEach((item, index) => {
            // 使用正则获取 用户名 并替换成想要的效果 拼接上Prop结尾的名称
            const propComponentName = item.replace(/(\/src\/components\/)([a-zA-Z]+)(\/prop\.vue)/, '$2Prop')
            // console.log(propComponentName); MyButtonProp...
            // 获取对应的路径根据下标
            const component = propValues[index]

            // 使用app 全局注册样式组件
            app.component(propComponentName, defineAsyncComponent(component))
        })

    }

}


// 最后导出
export default registerComponent

在main.ts中的操作

测试+效果：