浅谈vue 动态加载、注册组件
在大型项目中,vue组件是灵活复用的,需要从后台获取组件,加载注册渲染到页面,在项目遇到这个问题很久,没有得到解决,收集各方资料,整合一下栗子:下面这个数组,我们是从后台获取到的数据,其中有component属性,这就是存在后台的组件名字,this.layout是一个随时变化的数组,开始并不知道 它有多少组件,没法实现提前注册,变需要使用动态加载注册;this.layout=[
·
在大型项目中,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
修改配置,谁有更好的可以分享分享
更多推荐
已为社区贡献16条内容
所有评论(0)