咨询热线:400-010-1233在线销售咨询
不方便打电话?让科腾联系您:

首页 > 公司动态 亚洲城

VUE之组件的动态注册和动态加载

  实际项目中,针对不同的数据开发了不同的数据展示视图组件,例如:拓扑图、热力图、地图。每一类视图都有一个的.vue组件,在界面化管理平台上,要实现可以动态的新增视图组件,同时修改的时候可以随意的修改选择那一类视图。而且随着项目的扩大,基础视图组件的也会随之增加,即:基础视图组件的个数是不固定的。

  这就要求在界面化操作配置视图时,我们可以动态的注册和加载组件。关于动态注册及加载组件,网上有很多例子,看到转载最多的就是这篇博文,了Vue的四种动态加载的方式,写的很好,但是最初我一直无法很好的切入到实际项目中。另外一个比较常见的例子就是关于tab页的切换,通过使用Vue的compent的:is属性来动态切换使用那一个组件,关于这种方案,有很多博文,例如这篇博文,非常的直观清晰。但是搜到的相关博文中,大多是需要事先把相关组件import进来,然后再动态的切换组件,并不能做到动态的注册然后动态的切换。

  这篇博文写的非常好,他描述的问题和我遇到的问题基本一致,然后他提出了三种方案,我都分分别进行了尝试,最后使用注册局部组件的方式解决问题。下面来看下我实际遇到的问题。

  实际开发中,有一个panel.vue组件,用来面板信息,其中在修改面板时,可以选择面板的视图类型,这是一个下拉选择的效果,在选择了不同的数据视图之后,渲染不同的组件。

  其中:zjName是组件,zjResData是该组件对应的数据信息。如何动态的注册并引入组件呢?

  很显然,直接通过import或者require得到的组件就可以直接给到is属性即可。我之前一直在纠结组件名称,所以不管怎样做,都始终无法正确的渲染组件,其实,直接把组件给到is属性即可,不需要组件名称。

  (1) 在搜索相关博客的时候,不少人包括我自己都遇到了说没有template或者render函数的错误提示,很多人都是在这是vue2.0升级后vue-loader大于13.0的版本的问题,使用require时候在后面加.deult即可,经过验证,确实是这样,如果vue-loader版本为12.0.3,直接使用require即可,按时如果版本是14.2.4就需要deult.

  (2) 组件中如果有setInterval定时执行的定时任务,那么即便在组件后,该定制任务还是会继续执行,所以需要在beforeDestory钩子函数中,清楚定时器,参考这篇博文。

  ({ el: #app, data: { newAddText:, lists:[ {id:1,title:手机号码},

  软件测试2小时入门,让您快速了解软件测试基本知识,有系统的了解; SQL一小时,让您快速理解和掌握SQL基本语法 jmeter性能测试 ,让您快速了解主流来源性能测试工具jmeter 测试管理工具-禅道,让您快速学会禅道的使用,学会测试项目、用例、缺陷的管理、

  西北工业大学计算机组成原理实验课唐都仪器实验帮助,同实验指导书。分为运算器,存储器,控制器,模型计算机,输入输出系统5个章节

<< 返回

         

亚洲城

  • 联系电话:   400-010-1233
  • 地 址:       广州市天河区黄埔大道西平云路163号 广电科技大厦803-804、12楼
  • 传 真:     (8620)3835 2000
关于亚洲城 | 联系亚洲城 | 责任申明 | 网站地图 | 人才招聘 | 友情链接
Copyright © 2010 Guangzhou Ke Teng Information Technology Co. Ltd.All Rights Reserved.鄂ICP备16007204号-1