vue.extend()使用？

Question

const componentNameMap = {
        0: 'addProjectTemplate',
        1: 'addRsgroupTemplate',
        2: 'addNamespaceTemplate',
        3: 'addTableTemplate'
      };

假如我希望例如映射的方式，比如vue.extend(addProjectTemplate),但是映射的值是vue.extend(componentNameMap[0])，会报错，应该怎么处理好些？

Answer 1

import addProjectTemplate from './addProjectTemplate.vue';
import addRsgroupTemplate from './addRsgroupTemplate.vue';
import addNamespaceTemplate from './addNamespaceTemplate.vue';
import addTableTemplate from './addTableTemplate.vue';

const componentNameMap = {
    0: addProjectTemplate,
    1: addRsgroupTemplate,
    2: addNamespaceTemplate,
    3: addTableTemplate
};

// 用 vue.extend 扩展组件
const extendedComponent = Vue.extend(componentNameMap[0]);

Answer 2

可以先把所有组件先引入，在通过路径或组件名进行匹配

const modules = import.meta.glob('./views/**/*.vue')
const loadView = (view) => {
  let res;
  for (const path in modules) {
    const dir = path.split('views/')[1].split('.vue')[0];
    if (dir === view) {
      res = () => modules[path]();
    }
  }
  return res;
}


const extendedComponent = Vue.extend(loadView(componentNameMap[0]));

或者直接使用组件按需引入的方式

const extendedComponent = Vue.extend(() => import(`@/view/${componentNameMap[0]}.vue`));