vue父组件如何动态注册子组件

Question

vue的组件一般的都是import进来，在components注册，然后就可在父组件里面使用了，但是现在项目的组件是从后台拿到的组件名称，然后if else判断是否有import这个组件，最后生成。前期还好就3,4个组件，但是后来越来越多。。。if else越写越长，然后我在想有没有那种动态注册组件的方法，官网看了，网上找了一圈，曾经有人这么写

/**
*@desc 统一加载注册组件资源*/
registerComponent(templateName){
 Vue.component(templateName,    require("./../dashComponent/"+templateName+".vue"));
},

注册方案

this.registerComponent(this.layout[index].component);

这样就需要组件名称和后台给的组件名称相对应，自己尝试了以后发现并不行。。。。

最后渲染出来的dom

控制台也提示

这个应该是没有注册成功吧，之前有同学遇到过这种情况嘛？

Answer 1

Vue.component(templateName,require(./heNan/${templateName}.vue).default);可以这样用，但是提倡使用import的

Answer 2

楼上的代码有误。正常的应该是：
name:指的是文件名字，比如test.vue，那么name就是写test

<template>
<div ref="xxx"></div>
</template>
import Vue from "vue";

registerComponent(name) {
  return import("@/components/" + name);
 };
 
  this.registerComponent(name).then(component => {
    const cpt = Vue.extend(component.default);
    new cpt({
      el: this.$refs.xxx
    });
  });

Answer 3

没有遇到这个情况,如果是为了优化组件加载性能的话,可以考虑按需加载

Answer 4

注册函数

/**
*@desc 统一加载注册组件资源
*@return {Promise}
*/
registerComponent(templateName){
  return import(`./../dashComponent/${templateName}.vue`).then((component) => {
    return Vue.extend(component)
  })
}

组件动态挂载

this.registerComponent(templateName).then((Component) => {
    new Component({el: yourNeedEl})
})

或者这样

registerComponent(templateName){
  return import(`./../dashComponent/${templateName}.vue`).then((component) => {
    return Vue.component(templateName, component)
  })
}

Answer 5

https://www.cnblogs.com/stone...