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>