小编S C*_*S C的帖子

我正在尝试使用 Vue 3.2 中的动态组件开发选项卡，但组件没有显示。如果我更改<component :is=currentTab ></component>为<A/>，它就会出现，所以我认为<component></component>工作不正常，但我不知道为什么。如果您能给我一些建议，我将不胜感激。谢谢。

<template>
  <div class="flex-column">
    <div class="header" >
      <div id="dynamic-component-demo" class="demo">
        <button
          v-for="tab in tabs"
          v-bind:key="tab"
          v-bind:class="['tab-button', { active: currentTab === tab }]"
          v-on:click="currentTab = tab"
        >
          {{ tab }}
        </button>
        <component :is=currentTab ></component>
      </div>
    </div>
  </div>
<template>

<script setup lang="ts">
import Shop from './A/A.vue';
import Knowledge from './B/B.vue';
import Community from './C/C.vue';
import router from '../../router';

const currentTab= ref('A');
const tabs =  ['A', 'B', 'C']

</script>