遍历vue动态组件

component 的is中传入组件名,需要注意的是必须将可能用到的组件先注册才能使用.
父组件

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

<script>
import test1 from "../components/test1";
import test2 from "../components/test2";
export default {
  data() {
    return {
      list: [test1, test2,test2],
    };
  },
  components: {
    test2,
    test1,
  },
};
</script>

子组件1

<template>
  <div>
     1111
     
  </div>
</template>

子组件2

<template>
  <div>
        22222
    
  </div>
</template>