vue.extend()使用？

  • Z时代
  • 2024-02-23
  • 分类：IT

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

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

回答：

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]);

回答：

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

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`));

以上是 vue.extend()使用？ 的全部内容， 来源链接： utcz.com/p/934774.html

回到顶部