需求分析：创建一个通用组件，传递表单名称和数据就能加载表单信息，表单再某个固定的目录下。这里有两个难点，第一点是Vue如何动态加载组件，第二点是如何将目录下的组件都加载到当前页面。

动态加载目录下所有Vue组件

下面是Vite+Vue3的写法，将路径下所有的Vue组件获取到后，通过defineAsyncComponent存入到res_components中。

<script setup>
    const res_components = ref({})
    // 动态导入From下所有组件
    const importComponents = () => {
        const componentContext = import.meta.glob("@/components/Process/Form/*.vue")
        const keys = Object.keys(componentContext)
        keys.forEach(key => {
            const componentName = key.split("/")[5].replace(".vue", "")
            res_components.value[componentName] = defineAsyncComponent(() => import(`./Form/${componentName}.vue`))
        })
    }
    importComponents()
</script>

将组件动态渲染

使用时通过res_components获取到，使用方式如下：

<template>
	<!-- businessKey就对应vue组件接收的参数，可以通过component直接设置 -->
    <component v-if="currProcessForm" :is="res_components['表单名称']" :businessKey="businessKey"></component>
</template>