vue动态组件-根据数据展示特定组件

vue中有个内置组件component，利用它可以实现动态组件，在某些业务场景下可以替换路由

假设有以下三个组件：

　　com1、com2、com3

有一个外层路/coms中代码如下

　　

<template>
    <div class="container">
        <component :is="activeItem"/>
        <button @click="changeActiveItem">切换</button>
    </div>
</template>
<script>
    export default {
        name:"coms",
        data(){
            return {
                activeItem:'com1'
            }
        },
        components:{
            com1:()=>import('@/components/com-1.vue'),
            com2:()=>import('@/components/com-2.vue'),
            com3:()=>import('@/components/com-3.vue'),
        },
        methods:{
            changeActiveItem(){
                this.activeItem = this.activeItem === 'com1' ? 
                    'com2' : this.activeItem === 'com2' ? 
                    'com3' : 'com1' 
            }
        }
    }
</script>

那么这就实现了一个简单的动态路由了。

但是我现在有另外一种场景，那就是需要在某个页面展示不确定数量的组件，具体展示什么组件由权限判断后后端返回一个数组。

即我要同时显示三个组件中的0-3个组件，很容易想到用v-if判断是否存在于数组中来动态显示，稍显麻烦且不提，如果我要根据后台数据改变顺序呢？

这种时候循环往往是有效的，用数组长度个component组件就可以了嘛。

<template>
    <div class="container">
        <component :is="item" v-for="item in allComponents" :key="item" />
    </div>
</template>
<script>
    export default {
        name:"coms",
        data(){
            return {
                allComponents:['com1','com2']
            }
        },
        components:{
            com1:()=>import('@/components/com-1.vue'),
            com2:()=>import('@/components/com-2.vue'),
            com3:()=>import('@/components/com-3.vue'),
        }
    }
</script>

注：()=>import('@/components/com-1.vue')  为组件按需加载。当组件较多时这能显著提高性能。