我可以在 vue js 中创建一个带有循环的组件吗？有没有办法让它被识别为html标签？

Posted 2023-02-23

【中文标题】我可以在 vue js 中创建一个带有循环的组件吗？有没有办法让它被识别为html标签？

【英文标题】：Can I create a component with a loop in vue js? Is there a way to make it recognized as html tags?

【发布时间】：2019-12-28 08:03:36

【问题描述】：

我可以在 vue js 中创建一个带有循环的组件吗？ 有没有办法让它被识别为html标签？ 或者让我知道是否有其他方法

<div v-for="(component, index) in availableComponentLists" :key="index">
  <component.name></component.name> 
  // index 0: <Yellow></Yellow>
  // index 2: <Green></Green>
</div>

export default 
 data ()
   return 
     componentLists : [
         
         isAppend : true,
         name : 'Yellow'
        ,
          
         isAppend : false,
         name : 'Red'
        ,
          
         isAppend : true,
         name : 'Green'
        
      ]
    
  ,
  computed : 
    availableComponentLists ()
      return this.componentLists.filter((component)=>
        return component.isAppend
      )
    
  ,

【问题讨论】：

@Steven B. 谢谢！！！您的回答帮助我解决了问题

不客气！

【参考方案1】：

您正在寻找dynamic components。您可以按名称呈现组件。

Vue.component('yellow', 
  template: '#yellow',
  name: 'Yellow'
)

Vue.component('red', 
  template: '#red',
  name: 'Red'
)

Vue.component('green', 
  template: '#green',
  name: 'Green'
)

Vue.component('app-list', 
  template: '#list',
  name: 'app-list',
   data ()
     return 
       componentLists : [
           
           isAppend : true,
           name : 'yellow'
          ,
            
           isAppend : false,
           name : 'red'
          ,
            
           isAppend : true,
           name : 'green'
          
        ]
      ;
    ,
)

new Vue(
  el: "#app",
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <app-list />
</div>

<template id="list">
  <div>
    <div v-for="(component, index) in componentLists" :key="index">
      <component :is="component.name"></component>
    </div>
  </div>
</template>

<template id="yellow">
  <span>Yellow Component</span>
</template>

<template id="red">
  <span>Red Component</span>
</template>

<template id="green">
  <span>Green Component</span>
</template>