vue3 动态组件写法

supming1

于 2024-12-17 18:09:50 发布

阅读量118

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/supming1/article/details/144541430

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>