其实实现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,
...
},
