Question

Vue3 如何用 Composition API 实现动态组件？

2022-09-10

991

vue.js vuejs3 vue-composition-api

我想在 Vue3 中使用 Composition API 的动态组件功能。使用 Options API 没有任何问题。我遵循了以下说明：链接

这是我的代码：

<script setup>
import { ref } from "vue";
import General from "../components/ContractGeneral.vue";
import Networks from "../components/ContractDetails.vue";
const tabs = {
  General,
  Networks,
};
let currentTab = ref("Networks");
</script>

<template>
  <main>
    <nav>
      <ul>
        <li v-for="tab in tabs" :key="tab" @click="currentTab = tab">
          <div>
            <p>{{ tab }}</p>
          </div>
        </li>
      </ul>
      <div></div>
    </nav>
    <section>
      <keep-alive>
        <component :is="tabs[currentTab]"></component>
      </keep-alive>
    </section>
  </main>
</template>

问题是，在我的情况下，{{tab}} 显示的是完整的组件对象，而不仅仅是像“General”这样的名称。它显示的内容如下：“src/components/ContractGeneral.vue”、“__hmrId”：“f8a99314”

我该如何修复此错误？

Answer 1

您可以从 v-for 循环中获取 tab key ，如下所示：

<li v-for="(tab,key,index) in tabs" :key="tab" @click="currentTab = key">
    <div>
     <p>{{ key }}</p>
    </div>
  </li>