浅谈vue 动态加载、注册组件

最新推荐文章于 2025-10-31 08:53:14 发布

原创最新推荐文章于 2025-10-31 08:53:14 发布 · 8.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue注册 #动态注册组件 #动态加载组件

web 专栏收录该内容

32 篇文章

订阅专栏

在大型项目中，vue组件是灵活复用的，需要从后台获取组件，加载注册渲染到页面，在项目遇到这个问题很久，没有得到解决，收集各方资料，整合一下

栗子：下面这个数组，我们是从后台获取到的数据，其中有component属性，这就是存在后台的组件名字，this.layout是一个随时变化的数组，开始并不知道它有多少组件，没法实现提前注册，变需要使用动态加载注册；

this.layout=[
                  {"x":0,"y":0,"w":6,"h":10,"id":"A0",component:"certificateSumLine"},
                  {"x":0,"y":6,"w":6,"h":10,"i":"A1",component:"privateScoreTop"},
                  {"x":0,"y":12,"w":6,"h":10,"i":"A2",component:"certificateCountColumn"}
        ]

注册方案

this.registerComponent(this.layout[index].component);

这里是一个遍历，上面只是其中语句，通过下面这个方法，实现组件加载和注册。

 /**
   * @desc 统一加载注册组件资源
  */
   registerComponent(templateName){
 Vue.component(templateName,    require("./../dashComponent/"+templateName+".vue"));
   },

解析
require(),目前不支持传带有path的变量，所以只能传输组件名字，这也是其中局限性，需要把所有需要加载的组件放在一个目录下面，
也许可以参考一下
http://webpack.github.io/docs/api-in-modules.html#require-context
修改配置，谁有更好的可以分享分享