Vue.js 动态添加vue组件

请注意，我正在尝试在vue中动态添加一些组件，以便轻松创建一些选项卡，这些组件都存储在一个数组中，但是当我循环遍历每个组件时，它会显示组件的名称，而不是组件的内容，下面是我的代码

{{ttab}}
{{tabCont}}

从“./Profile.vue”导入ProfileComponents
从“./Passwords.vue”导入密码组件
从“/Projects.vue”导入项目组件
从“/Finiancials.vue”导入Finiancials组件
从“./Verifications.vue”导入验证组件
导出默认值{
数据（）{
返回{
选项卡：[“配置文件”、“密码”、“项目”、“财务”、“验证”
],
选项卡内容：[''，''，''，''
],
};
},
组成部分：{
配置文件组件、密码组件、项目组件、财务组件、验证组件
}
}

---

请问我做错了什么

首先，tabConts只是一个字符串数组，所以你得到了你想要的

您可能希望使用“组件”组件，该组件允许您指定要作为属性插入的组件的名称：

<component v-bind:is="componentName"></component>

因此，您的模板将更改为以下内容：

<template>
    <v-card>
       <v-tabs color="#4FC3F7"  slider-color="#004D40" right grow>
            <v-tab ripple v-for="(ttab, index) in tabss" :key="index">{{ttab}}</v-tab>
            <v-tab-item v-for="(tabCont, index) in tabConts" :key="index">
                <component :is="tabCont"></component>
            </v-tab-item>  
            </v-tabs>
    </v-card>
</template>

{{ttab}}

---

这假设组件正在正确注册，等等，但这应该会让您更接近解决方案。

您正在使用

tabCont

作为字符串。将其用作html

v-html=“tabCont”