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')  为组件按需加载。当组件较多时这能显著提高性能。