动态组件在脚本设置中不起作用

Question

我正在尝试使用 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>

Answer 1

当然不行。您的组件未按名称注册。 Vue 怎么知道 "A" 应该是 Shop 组件？

您有 2 个选择：

全局注册组件（app.component()) or locally （script setup 不可能 - 正常的 script 必须与 script setup 一起使用）。现在你可以将他们的名字作为 String 传递给 is 并且 Vue 将知道该做什么
或将组件对象传递给:is而不是字符串

<template>
  <div id="dynamic-component-demo" class="demo">
    <button
      v-for="(tab, i) in tabs"
      v-bind:key="tab.name"
      v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"
      v-on:click="currentTab = tabs[i]"
    >
      {{ tab.name }}
    </button>
    <component :is="currentTab.comp"></component>
  </div>
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import Shop from './A.vue';
import Knowledge from './B.vue';
const tabs = [
  { name: 'A', comp: Shop }, 
  { name: 'B', comp: Knowledge }
]

// using shallowRef to stop Vue from turning component definitions to reactive objects
// use normal ref to see a warning
const currentTab = shallowRef(tabs[0]);
</script>

Demo

如果我将 <component :is=currentTab ></component> 更改为 <A/>，它会显示

好吧，我真的很怀疑 - 当然，除非您在其他地方全局注册了您的组件（在问题中未显示的代码中）。如果您尝试将 <A/> 添加到链接演示中的 <template> 中，它不起作用...

动态组件在脚本设置中不起作用

Dynamic components doesn't work in script setup

components

vue.js

vuejs3