javascript - vue js动态重新排列组件的子组件

Question

我有一个包含子组件的 vue 组件，如下所示，我想在发生特定事件时重新排列子组件，我将如何实现这一点？

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 数组