Vue: отложенная загрузка из библиотеки (Bootstrap - Vue) внутри компонента

Question

Я изучаю функцию отложенной загрузки и пытаюсь использовать ее для Bootstrap - Vue компонента, но он не работает.

Если я импортирую b-card "нормально ", он отображается правильно:

import { BCard } from 'bootstrap-vue';
export default {
    components: {
        BCard
    }
};

Но когда я пытаюсь использовать синтаксис 'отложенной загрузки', он не работает:

export default {
    components: {        
        BCard: () => import('bootstrap-vue').BCard
    }
};

Компонент b-card не визуализируется, но ошибки не выдается, и в инструментах проверки DOM Chrome я вижу, что заполнитель <!----> размещается на Vue там, где должен быть компонент b-card. Я подозреваю, что загруженный объект библиотеки не имеет свойства BCard, но я не знаю, как еще получить доступ к компоненту библиотеки с синтаксисом 'lazy'.

Возможно ли lazy- загрузить модуль из библиотеки? Как это сделать?

Answer 1

При динамическом импорте модуля вы используете ключевое слово import в качестве функции, и оно возвращает обещание. Итак, для доступа к компоненту модуля вы можете использовать этот синтаксис:

export default {
  components: {
    BCard: () => import('bootstrap-vue').then(module => module.BCard)
  }
}