Как решить загрузку компонентов VueJs по требованию？ - PullRequest
Новая
       13

Как решить загрузку компонентов VueJs по требованию？

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

В проекте vue2.6 имеется большое количество всплывающих компонентов.Во избежание ручного импорта многих компонентов путь извлекаемого компонента динамически собирается при нажатии кнопки, а затем отображается на странице с помощью функции рендеринга, чтобы можно было извлечь маркер.Сборка окон.Однако после упаковки веб-пакета остается только два файла: app.js и vendor.js, и компоненты не разделяются.(Использование конфигурации веб-пакета vue-cli3 по умолчанию)

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

AsyncLoadComp.vue 

<script>
export default {
  props: {
    componentPath: {
      type: String
    }
  },
  render(h, cxt) {
    return h(require(`./${this.componentPath}.vue`).default, {});
  },
};
</script>

index.vue

Динамическое изменение значения componentPath при нажатии кнопки, аналогично"./component/HelloWord.vue"，, а затем передать этот параметр компоненту AsyncLoadComp. 

<async-load-comp v-for="path in componentPath" :key="path" :componentPath="path"/>
...