动态添加vue组件答案

【问题标题】：Dynamically adding vue components动态添加vue组件
【发布时间】：2018-11-10 03:23:35
【问题描述】：

请，我正在尝试在 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>

请问我做错了什么

【问题讨论】：

您正在使用tabCont 作为字符串。将其用作 html。 v-html="tabCont"

标签： vue.js

【解决方案1】：

对于初学者来说，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>

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

【讨论】：