如何在vue.js中呈现组件实例数组？

Question

我需要建立可以分组的动态组件列表。 然后，我需要发送有关已构建组件和组的所有信息。

我可以使用<component v-for="componentName in myComponents" :is="componentName"></component> ，并使用this.$children.map(component => component.getInformation())获得有关组件的信息，但是那么我就无法将某些组件移动到组件组中，因为我只有组件名称，而没有包含数据的组件实例（它只是使用默认数据进行渲染）。

我也可以用这个：

<template>
  <div ref="container"> </div>
</template>

<script>
  import someComponent from 'someComponent.vue'
  import Vue from 'vue'

  export default {
    data () {
      return {
        myComponents: []
      }
    },
    methods: {
      addSomeComponent () {
        let ComponentClass = Vue.extend(someComponent);
        let instance = new ComponentClass({});
        myComponents.push(instance);
        instance.$mount();
        this.$refs.container.appendChild(instance.$el)
      },
      getInformation () {
        return this.myComponents.map(component => component.getInformation());
      }
    }
  }
</script>

但是然后我不能使用反应性指令（例如拖放指令），它不是数据驱动模式。

有什么建议么？

Answer 1

<template>
    <div class="component">
        <template v-for="(child, index) in children()">
            <component :is="child" :key="child.name"></component>
        </template>
    </div>
</template>

<script>
  import someComponent from 'someComponent.vue'
  import Vue from 'vue'

  export default {
      methods: {
        children() {
            let ComponentClass = Vue.extend(someComponent);
            let instance = new ComponentClass({});

            return [
                instance
            ];
        },
      }
  }
</script>