1

我有一个 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>
4

1 回答 1

2

正如@Estradiaz在此评论中指出的那样，您可以通过将Promise组件直接导入:is指令：

this.component = () => import(`./${componentName}.vue`)
于 2019-04-04T21:33:48.627 回答