Vue 3 Element Plus动态标签页中如何导入动态组件内容？

这个需求完全可以实现，你的代码里有几个关键问题导致功能异常，下面是修正方案和解释：

原代码的问题 #

• 组件传入方式错误：你在reactive数组里直接写<GradSection/>是创建了组件实例，但<component :is="xxx">需要接收的是组件的引用（即导入的组件对象），不是实例化后的对象。
• 属性拼写错误：第二个tab的anme是笔误，应该是name，否则遍历的时候会拿不到正确的tab名称。
• 初始激活tab不匹配：activeName的初始值是'បន្ទប់'，但第一个tab的name是'Grad Section'，导致页面加载后不会正确激活第一个tab。

修正后的完整代码 #

<template>
  <el-tabs v-model="activeName" class="kk-tab h-20 bg-[var(--white)]" @tab-click="handleClick">
    <el-tab-pane :label="tab.name" :name="tab.name" v-for="tab in tabName" :key="tab.name">
      <template #label>
        <div class="text-center space-y-2">
          <div class="kk text-[1.2rem] ">{{ tab.desc }}</div>
        </div>
      </template>
      <div class="px-12 m-4">
        <component :is="tab.content"></component>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
// 直接导入组件对象（单文件组件默认导出为组件对象，无需解构）
import GradSection from '~/components/setting/GradSection.vue'
import ScoreSetting from '~/components/setting/ScoreSetting.vue'

// 初始激活值与第一个tab的name保持一致
const activeName = ref('Grad Section')

const tabName = reactive([
  {
    desc: 'បន្ទប់',
    name: 'Grad Section',
    // 传入组件引用而非实例
    content: GradSection
  },
  {
    desc: 'ការកំណត់ពិន្ទុ',
    // 修正拼写错误：anme → name
    name: 'SCORE SETTING',
    content: ScoreSetting
  },
])

const handleClick = (tab: any, event: Event) => {
  console.log(tab, event)
}
</script>

关键修改说明 #

1. 组件引用传递：把content: <GradSection/>改成content: GradSection，直接传递导入的组件对象，让<component :is>能正确识别并渲染组件。
2. 修正拼写错误：将第二个tab的anme改为name，保证tab的名称和激活逻辑正常运行。
3. 匹配初始激活tab：activeName的初始值改为第一个tab的name值'Grad Section'，确保页面加载时默认激活目标tab。
4. 添加key值：给el-tab-pane加上:key="tab.name"，符合Vue列表渲染规范，避免组件复用导致的异常。
5. 标签显示优化：模板label区域改为渲染tab.desc的柬文内容，更贴合你定义的显示需求。

内容的提问来源于stack exchange，提问作者Dota2 Match