基于数组列表显示组件名Vuejs

yacmzcpb  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(204)

我的代码中有很多组件,代码太长了,我认为需要更简单。
有没有办法让它像我的示例代码一样?
要使组件名这样叫

<template>
  <div v-for="(ob,i) in list">
    <ob.componentName :title="ob.title"></ob.componentName>
  </div>  
  </template>
  
  <script>
  import componentA from "..."
  import componentB from "..."
  import componentC from "..."
  export default {
    components:{
       componentA,componentB,componentC
    },
    data() {
      return {
       list:[
           {title:"A" , componentName:"component-a"},
           {title:"B" , componentName:"component-b"},
           {title:"C" , componentName:"component-c"},
       ]
        
      };
    },
  }
  </script>

我已经尝试了我的示例代码,当然这是错误的。
然后试着在谷歌上搜索,什么也找不到。

cgyqldqp

cgyqldqp1#

应使用:is属性动态Map导入的组件。

<div v-for="(ob,i) in list">
  <component :is="ob.componentName" :title="ob.title"></component>
</div>

相关问题