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',
]
}
}