问题形容

理论我的项目中，针对不同的数据开发了不同的数据展现视图组件，例如：拓扑图、热力求、地图。每一类视图都有一个独立的.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);
    },