Как правильно зарегистрировать импортированный динамический компонент при использовании Typescript? - PullRequest
Новая
       29

Как правильно зарегистрировать импортированный динамический компонент при использовании Typescript?

0 голосов
/ 04 апреля 2019

У меня есть проект 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>

1 Ответ

0 голосов
/ 05 апреля 2019

Как указывает @Estradiaz, вы можете передать обещание импортировать компонент непосредственно в директиву :is.

...