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

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

{{item.text}}

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

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

然后是万能组件

点击某个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,

...

},