VUE之组件的动态注册和动态加载
目录
问题描述
项目中的应用
使用总结
问题描述
实际项目中,针对不同的数据开发了不同的数据展示视图组件,例如:拓扑图、热力图、地图。每一类视图都有一个独立的.vue组件,在界面化管理平台上,要实现可以动态的新增视图组件,同时修改的时候可以随意的修改选择那一类视图。而且随着项目的扩大,基础视图组件的也会随之增加,即:基础视图组件的个数是不固定的。
这就要求在界面化操作配置视图时,我们可以动态的注册和加载组件。关于动态注册及加载组件,网上有很多例子,看到转载最多的就是这篇博文,讲解了Vue的四种动态加载的方式,写的很好,但是最初我一直无法很好的切入到实际项目中。另外一个比较常见的例子就是关于tab页的切换,通过使用Vue的compent的:is属性来动态切换使用那一个组件,关于这种方案,有很多博文,例如这篇博文,非常的直观清晰。但是搜到的相关博文中,大多是需要事先把相关组件import进来,然后再动态的切换组件,并不能做到动态的注册然后动态的切换。
这篇博文写的非常好,他描述的问题和我遇到的问题基本一致,然后他提出了三种方案,我都分分别进行了尝试,最后使用注册局部组件的方式解决问题。下面来看下我实际遇到的问题。
项目中的应用
实际开发中,有一个panel.vue组件,用来维护面板信息,其中在修改面板时,可以选择面板的视图类型,这是一个下拉选择的效果,在选择了不同的数据视图之后,渲染不同的组件。
<component :is="zjName" :resData="zjResData"></component>
其中:zjName是组件,zjResData是该组件对应的数据信息。如何动态的注册并引入组件呢?
zjName:function(){var t_url = '';if(!ctool.strIsEmpty(this.panelObj.res_data)){t_url = this.panelObj.pt_url;}else{t_url = this.pt_url;}if(this.panelObj.type!=0 && !ctool.strIsEmpty(t_url)){var myComponent =() => import(`./../../components/custom_panel/${t_url}.vue`);//var myComponent = resolve => require.ensure([], () => resolve(require(`./../../components/custom_panel/${t_url}.vue`)));//var myComponent =require(`./../../components/custom_panel/${t_url}.vue`).default;//var app_url = {t_url : require(`./../../components/custom_panel/${t_url}.vue`).default};return myComponent;}//Vue.component(t_url, res => require([`./../../components/custom_panel/${t_url}.vue`], res));return t_url;}
上述是计算属性种的一个方法,主要是用来动态的返回组件的,可以看到有几种注册方式。
很显然,直接通过import或者require得到的组件就可以直接给到is属性即可。我之前一直在纠结组件名称,所以不管怎样做,都始终无法正确的渲染组件,其实,直接把组件给到is属性即可,不需要组件名称。
使用总结
(1) 在搜索相关博客的时候,不少人包括我自己都遇到了说没有template或者render函数的错误提示,很多人都是在这是vue2.0升级后vue-loader大于13.0的版本的问题,使用require时候在后面加.default即可,经过验证,确实是这样,如果vue-loader版本为12.0.3,直接使用require即可,按时如果版本是14.2.4就需要default.
(2) 组件中如果有setInterval定时执行的定时任务,那么即便在组件销毁后,该定制任务还是会继续执行,所以需要在beforeDestory钩子函数中,清楚定时器,参考这篇博文。
(3) vue组件在mounted中使用setTimeout()失效,使用es6的箭头函数可以解决,例如:
mounted() {//不加延时的话,取div宽度为20,有问题setTimeout(()=>{this.initAll();},500);},
VUE之组件的动态注册和动态加载相关推荐
- vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- Vue性能优化:图片与组件,如何实现按需加载?
Vue性能优化:图片与组件,如何实现按需加载? 前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景,也可以是组件库的引入,只需部分组件的使用而无需 ...
- Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...
- 一. spring cloud gateway集成 spring cloud stream binder kafka,实现“动态路由“刷新与加载之采坑记录
一.前言 Spring Cloud Stream是用于构建消息驱动的微服务应用程序的框架. 本文主要介绍如何集成 Spring Cloud Stream,以 Kafka发布订阅模式(topic),实现 ...
- java 类 重新加载_Java动态类加载和重新加载的详细介绍
本篇文章给大家带来的内容是关于Java动态类加载和重新加载的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Java中可以在运行时加载和重新加载类,虽然并不像我们想像中那么简 ...
- 软件库Library之静态库\动态库和静态加载\动态加载
软件库Library之静态库\动态库和静态加载\动态加载 动态库之导入库 https://blog.csdn.net/wallaceli1981/article/details/5740718 * 动 ...
- vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题 参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
- Vue的生命周期有哪些,第一次加载会触发哪些钩子函数
Vue的生命周期有哪些,第一次加载会触发哪些钩子函数 beforeCreate created 创建 初始化数据事件 beforeMount mounted 载入 DOM渲染完成 beforeUpda ...
最新文章
- 智能车竞赛技术报告 | 智能车视觉 - 宜宾学院- 平头哥1组
- Redis系列四:redis支持的数据类型
- python ORM - sqlalchemy 操作使用
- 再见!微软宣布终止对旧版 Microsoft Edge 浏览器的支持
- E1 PCM复用设备作用
- arcgis导出access数据库能打开的文件
- linux下的安装命令行工具下载,linux系统程序安装(二)yum工具2-yum源及包下载
- c语言fgets函数的用法
- ubuntu 13.10 64位安装及配置 google拼音输入法及Adobe flash player、mp3 插件安装、中文GBK编码等 -转
- java基础概念整理(三)
- 浅谈http协议六种请求方法,get、head、put、delete、post、options区别
- windows对应字体
- 逻辑程序设计语言Prolog
- xp系统如何打开端口服务器,xp系统如何开启445端口?
- 计算机房通气换气次数,各种换气次数汇总
- 微信小程序开发视频分享
- java poi excel合并单元格,poi excel 如何合并单元格?
- HDU 1374 求三角形外接圆的半径
- 自学HarmonyOS应用开发(51)- 获取瓦片地图数据(续)
- 010 极限的四则运算例题