vue3 动态加载组件

<el-dropdown style="margin: 0px">
        <el-button type="primary"> 视图 </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="dropItem in dropItems" :key="dropItem" @click="changeView(dropItem.type)">{{
              dropItem.name
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

<div v-for="item in addiCostComponents" :key="item" v-show="viewType == item.type">
        <component
          :is="item.component"
          :baseData="tableData"
          :data="otherData[item.type]"
          :costElement="item.costElement"
          :ref="item.type"
          :tlid="form.TlId" />
      </div>


<script setup name="importAddicostNew">
// 匹配views里面所有的.vue文件 
const addicostModules = import.meta.glob('@/views/components/addicost/*.vue')
const addiCostComponents = ref([])
const dropItems = ref([{ type: 'base', name: '基本视图' }]) //切换视图数据
const viewType = ref('base') //dropItems选择的成本包类型

//切换视图
const changeView = (type) => {
  viewType.value = type
}

const importAddicostModules = async () => {
  addiCostComponents.value = []
  for (const path in addicostModules) {
    let viewName = path.split('/').pop().split('.')[0]
    let dropitem = dropItems.value.find((x) => x.type.split('_')[0].toLocaleLowerCase() == viewName)
    if (dropitem) {
      const component = await addicostModules[path]()
      addiCostComponents.value.push({ type: dropitem.type, component: component.default, costElement: dropitem.costElement })
      viewType.value = dropitem.type
    }
  }
}
</script>

组件文件夹路径如下：