使用Vue3 Script Setup与Composition API实现标签页遇渲染问题求助

你的代码存在两个核心问题，导致组件无法正确渲染：

1. :is 绑定的是字符串而非组件实例
   Vue 的 <component :is="..."> 渲染组件时，需要传入组件的实际引用，而非字符串名称。你当前绑定的是字符串 'Timeline'，Vue 会尝试查找全局注册的同名组件（但你的组件是局部导入的），因此只会渲染空的自定义标签。

2. 模板标签未闭合
   v-for 循环的 <div> 标签没有闭合，导致 DOM 结构混乱，后续的 <component> 被错误嵌套，直接影响渲染逻辑。

修正后的完整代码 #

<script setup>
import Timeline from './Timeline.vue';
import Profile from './Profile.vue';
import Groups from './Groups.vue';

// 用对象数组存储标签名称和对应的组件实例
const tabs = ref([
  { label: 'Timeline', component: Timeline },
  { label: 'Profile', component: Profile },
  { label: 'Groups', component: Groups }
])
// 初始绑定组件实例而非字符串
const currentTab = ref(tabs.value[0].component)
</script>

<template>
  <div class="tabs">
    <!-- 修复标签闭合，添加激活状态样式 -->
    <div 
      v-for="tab in tabs" 
      :key="tab.label"
      @click="currentTab = tab.component"
      :class="{ active: currentTab === tab.component }"
    >
      {{ tab.label }}
    </div>

    <!-- 绑定组件实例 -->
    <component :is="currentTab"></component>
  </div>
</template>

<style scoped>
/* 可选：添加激活标签的样式 */
.tabs div.active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}
</style>

另一种简化方案（保留字符串控制逻辑） #

如果你想继续用字符串切换标签，可以创建一个字符串到组件的映射对象：

<script setup>
import Timeline from './Timeline.vue';
import Profile from './Profile.vue';
import Groups from './Groups.vue';

const currentTab = ref('Timeline')
const tabs = ref(['Timeline', 'Profile', 'Groups'])

// 创建字符串到组件的映射
const componentMap = {
  Timeline,
  Profile,
  Groups
}
</script>

<template>
  <div class="tabs">
    <div 
      v-for="tab in tabs" 
      :key="tab"
      @click="currentTab = tab"
      :class="{ active: currentTab === tab }"
    >
      {{ tab }}
    </div>

    <!-- 通过映射对象获取组件实例 -->
    <component :is="componentMap[currentTab]"></component>
  </div>
</template>

两种方案的核心逻辑一致：确保:is绑定的是组件的实际引用，而非单纯的字符串名称。

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