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

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

有什么建议么？

标签： javascriptvue.jsvuejs2vue-component

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>