Vue.js如何将动态组件添加到dom

在我的应用程序中，我需要在从api获取数据后向dom添加组件

我有一个名为

Carousel

的组件和一个名为

Home

因此，我不知道我的

主页中需要多少转盘

问题是：如何从
方法：{}

我的代码：

Home.vue


    <template>
  <div>
      <template
        v-for="widget in widgets"
        v-bind:is="Carousel">
        {{ widget }}
      </template>


  </div>
</template>

<script>
  import Carousel from './widgets/Carousel.vue'

  export default {
    components: {
      Carousel
    },
    data() {
      return {
        page_content: [],
        widgets: [],

      }
    },
    created() {
      this.getHomeContent();
    },
    methods:
      {
        addWidget() {
          this.widgets.push('Carousel')
        },
        getHomeContent() {
          window.axios.get(window.main_urls["home-content"]).then(response => {
            this.page_content = JSON.parse(JSON.stringify(response.data));
            this.addWidget()
          });
        }
      }
  }
</script>




    <template>
    <div>
        <div :class="this.type == 'full' ? '' : 'container'">
            Slider
        </div>
    </div>
    </template>
    <script>
      export default
      {
        name:'Carousel',
        props:[
          'type',
          'showTitle',
          'dots',
          'controls',
          'data'
        ],
    methods:
          {
          }
      }
    </script>


如何创建尽可能多的
旋转木马
是我需要使用的循环

上面的代码只给了我一个字符串“carousel”

我希望呈现组件
这里是一个具有属性的动态组件的工作示例

<div>
   <template v-for="item in widgets">
     <component :is="item.name" :name="item.name" v-if="item.name==='carousel'"></component>
   </template>
</div>

然后它将创建三个组件

我创建了一个这样的测试组件来检查这一点

    components: {
        'carousel': {
            template: "<div>Dynamic component {{name}}</div>",
            props: ["name"]
        }
    },

组件：{
“旋转木马”：{
模板：“动态组件{{name}}”，
道具：[“名字”]
}
},
添加组件时需要循环哪些数据？@Rijosh json来自api（包含图像和文本…）的数据，该api将分配给
页面内容
，并且您希望添加数据中存在的尽可能多的组件，对吗？@Rijosh是的，页面内容将包含我需要的数据，然后我需要循环抛出它，例如，如果来自api的数据包含一个[type:carousel]，我需要将carousel组件添加到dom中，并使用它的
props
来初始化它，比如图像和文本等等？
    components: {
        'carousel': {
            template: "<div>Dynamic component {{name}}</div>",
            props: ["name"]
        }
    },