讨论： 能否实现vue3使用此库动态加载不同md文件？

[HaofangLiu]

在有多个md文件的时候， 会有很多相同的组件比如：

<template>
  <Start />
</template>

<script lang="ts">
import { defineComponent } from "vue";
// @ts-ignore
import Start from "../md/getStart.md";
export default defineComponent({
  components: {
    Start,
  },
});
</script>

<style></style>

是否有一个正确的封装这类组件的方法？ (希望类似能做到)

<template>
  <component :is="Start" />
</template>

<script lang="ts">
import { defineComponent,defineAsyncComponent } from "vue";
// @ts-ignore
export default defineComponent({
  props: {
    path: {
      type: String,
      required: true,
    },
  },
  components:{
      Start: defineAsyncComponent(() => import(path))      //<-------问题在这里：如何实现动态import？
  }
});
</script>

<style></style>

vue初学者 麻烦大佬指点指点

[WangXueZhi]

抱歉啊，忙了一段时间，没关注到这个，异步组件没问题的，不过你把 和在components中注册组件混用了，正确的两种使用组件的方式，看如下代码：

这是注册的方式使用异步组件

<template>
    <Start />
</template>
import { defineComponent,defineAsyncComponent } from "vue";
export default defineComponent({
  components:{
      Start: defineAsyncComponent(() => import(path))  
  }
});

这是变量的方式使用异步组件

<template>
    <component :is="Start" />
</template>
import { defineComponent,defineAsyncComponent } from "vue";
export default defineComponent({
  setup: () => {
      const Start = defineAsyncComponent(() => import(path));
      return {
          Start
      }
  }
});

[yuanxin518]

抱歉啊，忙了一段时间，没关注到这个，异步组件没问题的，不过你把 和在components中注册组件混用了，正确的两种使用组件的方式，看如下代码：

这是注册的方式使用异步组件

<template>
    <Start />
</template>
import { defineComponent,defineAsyncComponent } from "vue";
export default defineComponent({
  components:{
      Start: defineAsyncComponent(() => import(path))  
  }
});

这是变量的方式使用异步组件

<template>
    <component :is="Start" />
</template>
import { defineComponent,defineAsyncComponent } from "vue";
export default defineComponent({
  setup: () => {
      const Start = defineAsyncComponent(() => import(path));
      return {
          Start
      }
  }
});

感谢大佬的东西。