Vuejs2 for循环中基于Vue-name的惰性组件渲染

Vuejs2 for循环中基于Vue-name的惰性组件渲染,vuejs2,vue-component,Vuejs2,Vue Component,早上好,有没有办法在代码中“动态”呈现组件 例如(半伪码): //在这里,它应该从列表中加载组件,而不是字符串 {{component_to_render} //进口 导出默认值{ 组成部分:{ 简介, 用户数据, 成分a, 组件B, 成分C, }, 数据(){ 返回{ 组件列表:[ '', '', '', '', '', ] } } 现在,v-for中的{{paragration}从组件列表列表返回字符串。有没有办法代替字符串“动态”生成这些组件 可能有一些我不知道的函数。尝试搜索延迟

早上好,有没有办法在代码中“动态”呈现组件

例如(半伪码):


//在这里,它应该从列表中加载组件,而不是字符串 {{component_to_render}

//进口 导出默认值{ 组成部分:{ 简介, 用户数据, 成分a, 组件B, 成分C, }, 数据(){ 返回{ 组件列表:[ '', '', '', '', '', ] } }
现在,
v-for
中的
{{paragration}
组件列表
列表返回字符串。有没有办法代替字符串“动态”生成这些组件

可能有一些我不知道的函数。尝试搜索延迟加载,但仅通过延迟导入找到答案

我不需要完整的答案,我会很感激你给我指明了搜索的方向


我将非常感谢您的帮助!

感谢Michal Levý:

工作解决方案:

其他文件中的组件声明:

Vue.component('intro', Intro)
Vue.component('user-data', UserData)
Vue.component('component-a', ComponentA)
Vue.component('component-b', ComponentB)
Vue.component('component-c', ComponentC)
从我的问题中删除文件,但现在它工作正常:

<template>
    <div>
        <template>
            <div class="text">
                <p
                    v-for="(component_to_render, index) in components_list"
                    :key="index"
                >
                    // instead of {{ component_to_render }}
                    <component v-bind:is="component_to_render"></component>
                </p>
            </div>
        </template>
    </div>
</template>

<script>
// imports
export default {
    data () {
    return {
        components_list: [
            'intro',
            'user-data',
            'component-a',
            'component-b',
            'component-c',
        ]
    }
}

//而不是{{component_to_render}

//进口 导出默认值{ 数据(){ 返回{ 组件列表:[ ‘简介’, “用户数据”, “a组分”, “成分b”, ‘c组分’, ] } }
Woah!就是它!非常感谢!
<template>
    <div>
        <template>
            <div class="text">
                <p
                    v-for="(component_to_render, index) in components_list"
                    :key="index"
                >
                    // instead of {{ component_to_render }}
                    <component v-bind:is="component_to_render"></component>
                </p>
            </div>
        </template>
    </div>
</template>

<script>
// imports
export default {
    data () {
    return {
        components_list: [
            'intro',
            'user-data',
            'component-a',
            'component-b',
            'component-c',
        ]
    }
}