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')  為組件按需加載。當組件較多時這能顯著提高性能。