如何在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>