vue js dynamiccaly重新安排组件的子项

Question

我有一个vue组件，子项如下，id想重新安排孩子，当某个事件发生时，我该如何解决这个问题？

app.vue

<template> 
    <div> 
     <child-one></child-one> 
     <child-two></child-two> 
    </div> 
</template> 
<script> 
    module.exports = { 

     components: { 
     'child-one' : require('./child1.vue'), 
     'child-two' : require('./child2.vue') 

     }, 
    events: { 
     'rearrange': function (d) { 
      // dynamically rearrange 'child-one' and 'child-two' 
      } 
    } 
</script> 

Answer 1

如果您需要动态操纵它们，它可能比较容易，如果你生成它们太动态：

JS：

data(){ 
    return { 
     components:[ 
      { 
       type:'child-one' 
      }, 
      { 
       type:'child-two' 
      } 
     ] 
    } 
} 

HTML：

<template> 
    <div> 
     <div v-for="component in components" :is="component.type"></div> 
    </div> 
</template> 

然后在你的事件你可以操纵components阵列不过你需要