Vue 3动态加载异步组件

Question

我想根据它的类型显示一个组件。让我解释一下。

我有多个彼此相似的组件，但根据给定的类型，它们应该显示不同的内容。使用defineAsyncComponent方法，我可以导入组件并轻松使用它们。例子:

const CheckboxControl = defineAsyncComponent(
() => import('@/components/editor/controls/CheckboxControl.vue'),
);

这工作得很好，但是如果我这样做，我有大量的导入组件。我不想这样。我的方法是将defineAsyncComponent包装在一个箭头函数中，像这样:

const loadComponent = async (type: string) =>
defineAsyncComponent(
() =>
import(
`@/components/editor/controls/${type[0].toUpperCase()}${type.substring(
1,
)}Control.vue`
),
);

在模板中，我能够像这样渲染组件<component :is="renderComponent(control.type)" />

但是这给了我以下警告:

[Vue warn]: Component is missing template or render function.

等待defineAsyncComponent方法不能解决问题。

我做错了什么?如何动态导入这些组件?

更新以下是control.type属性内部的所有可能性:

<<ul>

复选框/gh>

选择

textarea

更新2

这是我当前正在工作的代码:

const CheckboxControl = defineAsyncComponent(
() => import('@/components/editor/controls/CheckboxControl.vue'),
);
const DateControl = defineAsyncComponent(
() => import('@/components/editor/controls/DateControl.vue'),
);
const EmailControl = defineAsyncComponent(
() => import('@/components/editor/controls/EmailControl.vue'),
);
const NumberControl = defineAsyncComponent(
() => import('@/components/editor/controls/NumberControl.vue'),
);
const RadioControl = defineAsyncComponent(
() => import('@/components/editor/controls/RadioControl.vue'),
);
const RangeControl = defineAsyncComponent(
() => import('@/components/editor/controls/RangeControl.vue'),
);
const SelectControl = defineAsyncComponent(
() => import('@/components/editor/controls/SelectControl.vue'),
);
const TextareaControl = defineAsyncComponent(
() => import('@/components/editor/controls/TextareaControl.vue'),
);
const TextControl = defineAsyncComponent(
() => import('@/components/editor/controls/TextControl.vue'),
);
const loadComponent = (type: string) => {
switch (type) {
case 'checkbox':
return CheckboxControl;
case 'date':
return DateControl;
case 'email':
return EmailControl;
case 'number':
return NumberControl;
case 'radio':
return RadioControl;
case 'range':
return RangeControl;
case 'select':
return SelectControl;
case 'textarea':
return TextareaControl;
case 'text':
return TextControl;
default:
// TODO: show error component if type not supported
break;
}
};

3

更新对于我当前的设置，我使用vite作为构建工具。我使用的虚拟版本是2.9.5。我使用的vue版本是3.2.33, typescript版本是4.6.3。

Answer 1

感谢@Estus Flask的帮助:)

所以问题是我试图用@别名导入它。我把我的方法改成这样:

const loadComponent = (type: string) =>
defineAsyncComponent(
() =>
import(
`./controls/${type[0].toUpperCase()}${type.substring(1)}Control.vue`
),
);

可以运行了

我不知道为什么在这种情况下，它不工作与@别名，因为它工作时，我使用它在

const CheckboxControl = defineAsyncComponent(
() => import('@/components/editor/controls/CheckboxControl.vue'),
);

也许有人能解释一下?

Answer 2

async强制函数返回promise对象，而组件是预期的。它应该是正则函数:

const loadComponent = (type: string) => ...

defineAsyncComponent处理import的底层承诺。