动态添加vue组件

Question

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

<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">
                {{tabCont}}
            </v-tab-item>  
            </v-tabs>
    </v-card>
</template>

<script>
  import ProfileComponents from './Profile.vue' 
  import PasswordsComponents from './Passwords.vue' 
  import ProjectsComponents from './Projects.vue' 
  import FiniancialsComponents from './Finiancials.vue' 
  import VerificationsComponents from './Verifications.vue'
    export default {
        data() {
            return {
                tabss:['Profile','Passwords','Projects','Finiancials','Verifications'
                ],
                tabConts:['<ProfileComponents/>','<PasswordsComponents/>','<ProjectsComponents/>','<FiniancialsComponents/>','<VerificationsComponents/>'
                ],
            };
        },
        components:{
            ProfileComponents, PasswordsComponents, ProjectsComponents, FiniancialsComponents, VerificationsComponents
        }
    }
</script>

我哪里做错了？

Answer 1

对于初学者来说，tabConts只是一个字符串数组，所以你得到了你想要的东西。

您可能想要使用' component‘组件，它允许您指定要作为属性插入的组件的名称：

<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>

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