vite-plugin-md2vue
vite-plugin-md2vue copied to clipboard
讨论: 能否实现vue3使用此库动态加载不同md文件?
在有多个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初学者 麻烦大佬指点指点
抱歉啊,忙了一段时间,没关注到这个,异步组件没问题的,不过你把
这是注册的方式使用异步组件
<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
}
}
});
抱歉啊,忙了一段时间,没关注到这个,异步组件没问题的,不过你把 和在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 } } });
感谢大佬的东西。