vue-使用万能组件实现tab切换

其实实现tab切换的方式有很多种，在豆瓣的小项目中，我想着尝试用component组件实现一下

<div class="tab" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)" :style="isActive===index?'border-bottom-color:#f00;color:#333;':'color: #9b9b9b;border-bottom-color:transparent'">{{item.text}}</div>

其实这里改成动态设置class是比较简单的，但是当时是写成动态更改style了。

isActive是data中设置的变量，便是当前是那个tab被选中了。

然后是万能组件

<component :is="tab_content" class="tabs_content"></component>

点击某个tab触发changetab方法

changeTab(index){

this.isActive=index;

this.tab_content=this.tab_content_arr[index];

}

tab_content和tab_content_arr的初始值

tab_content:"BookBuy",

tab_content_arr:["BookActivity","BookBuy","BookTabList"]

其实他们就是我们引进的需要被切换的子组件的名称，使用时要将他们引入并注册好。

import BookBuy from './BookBuy.vue';

...

components:{

BookBuy,

...

},