vue3 动态组件

<template>
    <div class="max_box">
        <a-tabs v-model:activeKey="activeKey"  @change="callback">
            <a-tab-pane  :tab="item.tab" v-for="item in state.list" :key="item.key">
           </a-tab-pane>
        </a-tabs>
        <component :is="state.currentComponent"></component>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,defineAsyncComponent,onMounted} from 'vue';
const activeKey = ref('SJPZ');
const state = reactive<any>({
    list:[
      {
        key:'GXDZP',
        tab:'关系对照'
      },
      {
        key:'SJPZ',
        tab:'数据匹配'
      }
    ],
    currentComponent:'',
})
const mapModule = new Map([
  ["SJPZ", defineAsyncComponent(() => import("./components/dataMatching/index.vue"))],
  ["GXDZP", defineAsyncComponent(() => import("./components/relationalComparison/index.vue"))],
]);
onMounted(() =>{
    state.currentComponent = mapModule.get("GXDZP");
})
const callback = (val:any) => {
    state.currentComponent = mapModule.get(val);
};
</script>

<style scoped>

</style>