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数组，但需要

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

1 个答案: