我需要构建可以分组的动态组件列表。然后,我需要发送有关已构建组件和组的所有信息。
我可以使用<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>
但是我不能使用反应性指令(例如拖放指令),而且它不是数据驱动模式。
有什么建议吗?
答案 0 :(得分:-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>