Загрузка компонента асинхронно в Vue.js не работает - PullRequest
Новая
       11

Загрузка компонента асинхронно в Vue.js не работает

0 голосов
/ 14 января 2019

Я пытаюсь заменить загрузку компонента v-tooltip VPopper со стандартной загрузки на асинхронную загрузку.

Стандартная загрузка - компонент загружен и работает нормально 

import { VPopover } from 'v-tooltip'

export default {
  components: {
    VPopover
  }
}

Асинхронная загрузка - компонент загружен неправильно 

export default {
  components: {
    VPopover: () => import('v-tooltip')
  },
}

По какой-то причине выше не работает, и компонент не загружен правильно. Может быть, потому что это не экспорт по умолчанию, а именованный экспорт в компоненте v-tooltip Vue?

Я использую Webpack сзади.

Если я загружаю свой пользовательский компонент асинхронно, тогда он работает как положено. Например, это работает для меня: 

export default {
  components: {
    MyCustomComponent: () => import('@/components/MyCustomComponent.vue')
  }
}

1 Ответ

0 голосов
/ 14 января 2019

Как @gugadev отметил выше

Ленивый модуль импорта возвращает Promise с модулем экспорта, в В вашем случае объект, содержащий именованный экспорт. Vue не знаю, что из названного экспорта следует импортировать, поэтому просто ничего не делает.

Я нашел это решение, которое работает 

export default {
  components: {
    VPopover: () => import('v-tooltip').then(m => m.VPopover)
  }
}
...