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

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/github_37847992/article/details/78128794

在大型项目中,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
修改配置,谁有更好的可以分享分享

展开阅读全文

没有更多推荐了,返回首页