问题描述在实际项目中，针对不同的数据开发了不同的数据展示视图组件，例如：拓扑图、热力图、地图。每种类型的视图都有一个独立的.vue组件。在界面管理平台上，需要动态添加视图组件，同时在修改时可以自由修改和选择那种类型的视图。并且随着项目的扩大，基础视图组件的数量也会增加，即基础视图组件的数量不是固定的。这就需要我们在通过接口操作配置视图的时候，能够动态的注册和加载组件。关于动态注册和加载组件，网上有很多例子。这篇博文是转发次数最多的一篇。讲解了Vue的四种动态加载方式。写的不错，但是一开始切入实际项目的时候还不能很好的切入。中间。另一个常见的例子是标签页的切换。通过使用Vue的compent的:is属性来动态切换使用哪个组件，关于这个解决方案的博文很多，比如这篇博文，非常直观明了。但是搜索到的相关博文大多需要提前导入相关组件，然后动态切换组件，并不能动态注册再动态切换。这篇博文写得非常好。他描述的问题和我遇到的问题基本一致。然后他提出了三个解决方案。分别试了下，最后通过注册本地组件解决了问题。再来看看我实际遇到的问题。在项目中应用的实际开发中，有一个panel.vue组件，用于维护面板信息。修改面板时，可以选择面板的视图类型。这是下拉选择的效果。选择不同的数据视图后，渲染不同的组件。其中：zjName为组件，zjResData为组件对应的数据信息。如何动态注册和引入组件？zjName:function(){vart_url='';如果(!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)){varmyComponent=()=>import(`./../../components/custom_panel/${t_url}.vue`);//varmyComponent=resolve=>require.ensure([],()=>resolve(require(`./../../components/custom_panel/${t_url}.vue`)));//varmyComponent=require(`./../../components/custom_panel/${t_url}.vue`).default;//varapp_url={t_url:require(`./../../components/custom_panel/${t_url}.vue`).default};返回我的组件；}//Vue.component(t_url,res=>require([`./../../components/custom_panel/${t_url}.vue`],res));returnt_url;}以上是计算属性类型的方法，主要用于动态返回组件。可以看到有几种注册方式。显然，直接通过import或者require获取的组件，可以直接赋予is属性。之前一直纠结于组件名称，所以无论我做什么，我仍然无法正确渲染组件。其实直接把组件给is属性就行了，不需要组件名。使用总结(1)在搜索相关博客的时候，包括我自己在内的很多人都遇到过提示没有模板或者render函数的错误信息。很多人认为这是vue2.0升级后vue-loader大于13.0的版本问题是使用require后可以加上.default。经过验证，确实如此。如果vue-loader版本是12.0.3，直接使用require即可。如果当时版本是14.2.4，需要默认。(2)如果组件中有setInterval定时任务，即使组件销毁后，自定义任务还会继续执行，所以需要在beforeDestory钩子函数中清除定时器，参考这篇博文。(3)Vue组件在mounted中使用setTimeout()失败，使用es6箭头函数解决，例如：mounted(){//如果没有延迟，把div宽度取为20，setTimeout(()=>{this.initAll();},500);},
