使用Typescript时如何正确注册导入的动态组件?

Question

我有一个 Vue CLI 3 项目，它试图从基本组件上的监视属性中动态加载组件。是否可以在运行时像这样在本地动态注册组件？

只要我先在components属性中注册组件，我就可以动态导入组件。

基本组件如下所示：

<template>
<div>
<component :is="component"></component>
</div>
</template>
@Component<BaseComponent>({
watch: {
childComponentName(componentName) {
Vue.component(componentName, import(/* webpackChunkName: 'child' */  `./${componentName}.vue`).then(m => m.default || m);
this.component = componentName;
}
})
export default class BaseComponent extends Vue {...}

子组件是

@Component<child>({
name: 'child',
})
export default class child extends Vue {...}

我知道上面的代码正在进行全局注册，这需要在创建App组件之前进行，但是有没有办法在本地注册它？

组件应根据变量名称注册子组件并呈现它 Vue 抛出一个错误，因为组件没有注册：

[Vue warn]: Unknown custom element: <child> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <BaseComponent> at src/components/BaseComponent.vue
<App> at src/App.vue
<Root>

Answer 1

正如@Estradiaz在此注释中指出的那样，您可以将将组件直接导入:is指令的Promise传递：

this.component = () => import(`./${componentName}.vue`)