vue3 动态组件写法

<template>
  <section>
    <el-tabs class="mt20" v-model="active">
      <el-tab-pane label="调推结果" name="resultTable" />
      <el-tab-pane label="调推预测报表" name="baseInfo" />
    </el-tabs>
    <section>
      <component :is="tabs[active]" />
    </section>
  </section>
</template>

<script lang="ts" setup>
  import resultTable from './components/resultTable.vue'
  import baseInfo from './components/baseInfo.vue'

  const tabs = {
    resultTable,
    baseInfo,
  }
  const active = ref('resultTable')
</script>