Как создать асинхронные динамические компоненты в Vue - PullRequest
Новая
       28

Как создать асинхронные динамические компоненты в Vue

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

Я понимаю динамические компоненты, я понимаю async компоненты, но я понятия не имею, как их объединить (рифма непреднамеренно).

Как мне переписать 

<template>
    <component :is="name" v-if="component" />
</template>
<script>
export default {
  name: 'dynamic-async-loader',

  props: ['name'],

  components: {
    compA: () => import('./components/compA'),
    compB: () => import('./components/compB'),
    compC: () => import('./components/compC'),
  },
};
</script>

, чтобы можно было опустить объект компонентов и вместо этого передать путь в качестве пропеллера?например, 

<template>
    <component :is="name" v-if="component" />
</template>
<script>
export default {
  name: 'dynamic-async-loader',

  props: ['name', 'path'],

  // magic
};
</script>

Так что я смогу сделать следующее 

<dynamic-async-loader :name="'compA'" :path="'./components/compA'" />
<dynamic-async-loader :name="'compB'" :path="'./components/compB'" />
<dynamic-async-loader :name="'compC'" :path="'./components/compC'" />

Может кто-нибудь объяснить мне магию?

...