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设为null
      console.error(`组件导入失败: ${newPath}`, error);
      formComponent.value = null;
    }
  }
}, { immediate: true });

</script>

二、父组件

---

<DynamicFormLoader :path="loadedFormPath" />

 在需要的地方引入这个组件就可以了，如果想要通过相对路径的方式加载对应的vue文件只需要，对loadedFormPath 进行赋值即可

子组件的路径：src/views/form/childen.vue