Vue3 根据相对路径加载vue组件
一、设置动态组件加载器
1、"DynamicFormLoader.vue"
<template><div><component :is="formComponent" v-if="formComponent" /></div>
</template><script setup>
import { ref, watch } from 'vue';
import { defineProps } from 'vue';// 定义组件属性，要求必须提供一个字符串类型的"path"属性
const props = defineProps({path: {type: String,required: true}
});// 使用ref创建一个名为formComponent的引用，用于存储表单组件实例
const formComponent = ref(null);// 监听props中的"path"属性的变化，当"path"变化时，动态导入相应的表单组件
watch(() => props.path, async (newPath) => {// 当新的路径存在时，尝试导入对应的组件if (newPath) {try {// 动态导入位于@/components/forms/目录下且文件名与 newPath 相同的 Vue 组件const component = await import(`/${newPath}`);// 将导入的组件赋值给formComponent引用formComponent.value = component.default;} catch (error) {// 如果导入失败，打印错误信息并将formComponent设为nullconsole.error(`组件导入失败: ${newPath}`, error);formComponent.value = null;}}
}, { immediate: true });</script>
二、父组件
<DynamicFormLoader :path="loadedFormPath" />在需要的地方引入这个组件就可以了，如果想要通过相对路径的方式加载对应的vue文件只需要，对loadedFormPath 进行赋值即可
子组件的路径：src/views/form/childen.vue