Vue的动态组件切换

1.通过循环遍历tab栏

<div class="bigRanking">
      <span v-for="(item, index) in navData" 
            :class="{ nav_li : active === index }" 
            :key="index" @click="changRanking(index,item)" 
            >
            {{item.name}}
      </span>
</div>

<keep-alive>  //keep-alive  在切换组件是否保留切换前的状态
     <component :is='currcompont'></component>   
</keep-alive>

2.引入相关组件

import interactive from "../../components/ranking/interactive.vue"
import attract from "../../components/ranking/attract.vue"

3.通过compontents注册

components:{
        interactive,
        attract
    },

4.在data中定义tab数据

navData: [
                { 
                    name: '互动指数排行',
                    path:'interactive'
                },
                { 
                    name: '吸引指数排行',
                    path:'attract'
                },
            ],

currcompont：interactive;     //默认先展示哪个组件

5.最后可以通过事件来切换组件

changRanking(index,item){
            this.currcompont = item.path
        },

 

以上内容就是动态组件的切换小demo。请多多指点