【vue】vue3.x批量注册组件

╰半橙微兮° 2022-09-04 08:57 199阅读 0赞

### 文章目录 ###

*  前言
 *  开始
 *   *  尝试
     *  解决
     *  最终配置

# 前言 #

在之前用2.x的时候，已经写过一篇文章了：[https://blog.csdn.net/s1441101265/article/details/109490412][https_blog.csdn.net_s1441101265_article_details_109490412]  
现在在搭建vue3.x的项目，就准备把上面那块优化下。  
但是直接通过import引用会报错的，这次搜了半天还是解决不了，最后在群里问了下，有人回答了

# 开始 #

![在这里插入图片描述][2299f357821b44d8bc522023599f23be.png]  
在群里面问了下，终于有人回答了，说是这样引用。

import helloWorld from './test/HelloWorld'
    export const loadView = (view) => { 
      return () => import(`@/components/frame/${ view}.vue`)
    }
    // 装载组件
    export default function (Vue) { 
      Vue.component('HelloWorld', helloWorld)
      Vue.component("frame-head", loadView("frame-head"))
    }

## 尝试 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]  
还是会报错

## 解决 ##

百度搜索：Invalid VNode type: undefined (undefined)  
[https://blog.csdn.net/aa760774653/article/details/112414623][https_blog.csdn.net_aa760774653_article_details_112414623]  
![在这里插入图片描述][9d315ce632b742e6abad45d7b02fd411.png]  
第一篇文章打开，从上翻到下，看到了评论  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]

看到他那也是vue3，抱着随便试试的形态，这样加了一下，然后就成功了

## 最终配置 ##

// 引入插件
    import {  defineAsyncComponent } from 'vue'
    
    // 装载组件
    export default function (Vue) { 
      Vue.component("frame-head", defineAsyncComponent(() => import(`@/components/frame/frame-head`)))
      Vue.component('HelloWorld', defineAsyncComponent(() => import(`@/components/test/HelloWorld`)))
    }

比用vue2.x的时候更简洁了，另外觉得2.x应该也有这个工具：defineAsyncComponent

[https_blog.csdn.net_s1441101265_article_details_109490412]: https://blog.csdn.net/s1441101265/article/details/109490412
[2299f357821b44d8bc522023599f23be.png]: /images/20220829/d416591cc9d24243a7a822d945ce3ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20220829/eafb8263b359483ebeec855336c45117.png
[https_blog.csdn.net_aa760774653_article_details_112414623]: https://blog.csdn.net/aa760774653/article/details/112414623
[9d315ce632b742e6abad45d7b02fd411.png]: /images/20220829/918a112f14a241b9bf8d882f547c7d8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]: /images/20220829/5bfa049dbdce442ea8b7bed045692b9f.png