一、設置動態組件加載器

---

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