如何在Vue中创建异步动态组件

Question

我了解dynamic组件，也了解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>

是否可以省略components对象，而是将路径作为道具传递？例如

<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'" /> 

有人可以向我解释魔术吗？