标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。
因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 slot。所以一般的设计方案是，在 slot 中定义多个 div，然后在接到切换消息时，再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了，我们希望在组件中处理这些交互逻辑，slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现，pane 组件嵌在 tabs 组件中。
1 基础版
因为 tabs 组件中的标题是在 pane 组件中定义的，所以在初始化或者动态变化标题时，tabs 组件需要从 pane 组件中获取标题。
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签页组件</title> <link type="text/css" href="https://www.jb51.net/index.css"> </head> <body> <div v-cloak> <tabs v-model="activeIndex"> <pane label="科技"> 火星疑似发现“外星人墓地”？至今无法解释 </pane> <pane label="体育"> 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠 </pane> <pane label="娱乐"> 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》 </pane> </tabs> </div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="https://www.jb51.net/tabs.js"></script> <script> var app = new Vue({ el: '#app', data: { activeIndex: 0 } }); </script> </body> </html>
pane 组件：
Vue.component('pane', { name: 'pane', template: '\ <div v-show="isShow">\ <slot></slot>\ </div>\ ', props: { //标题 label: { type: String, default: '' } }, data: function () { return { //显示或隐藏 isShow: true } }, methods: { //通知父组件，更新标题 init() { this.$parent.init(); } }, watch: { //当 label 值发生变化时，更新标题 label() { this.init(); } }, //挂载时，更新标题 mounted() { this.init(); } });
在 pane 组件中，我们做了以下设计：
因为 pane 组件需要控制标签页内容的显示与隐藏，所以我们在 data 中定义了一个 isShow，并用 v-show 指令来控制内容的显示或隐藏。当点击这个 pane 所对应的标签页标题时，它的 isShow 被设置为 true。
我们需要一个标识来识别不同的标签页标题，本示例用的是 pane 组件定义顺序的索引。
在 props 中定义了 label，用于存放标题。因为 label 可以动态变化，所以必须在挂载 pane 以及当 label 值发生变化（通过监听实现）时，通知父组件，重新初始化标题。因为 pane 是独立组件，所以这里使用了 this.$parent 来调用父组件 tabs 的初始化方法。
tabs 组件：
Vue.component('tabs', { template: '\ <div>\ <div>\ <!-- 标签页标题-->\ <div :class="tabClass(item)"\ v-for="(item, index) in titleList"\ @click="change(index)">\ {{ item.label }}\ </div>\ </div>\ <div>\ <!-- pane 组件位置-->\ <slot></slot>\ </div>\ </div>', props: { value: { type: [String, Number] } }, data: function () { return { currentIndex: this.value, titleList: []//存放标题 } }, methods: { //设置样式 tabClass: function (item) { return ['tabs-tab', { //为当前选中的 tab 添加选中样式 'tabs-tab-active': (item.name === this.currentIndex) }] }, //获取定义的所有 pane 组件 getTabs() { return this.$children.filter(function (item) { return item.$options.name === 'pane'; }) }, //更新 pane 是否显示状态 updateIsShowStatus() { var tabs = this.getTabs(); var that = this; //迭代判断并设置某个标签页是显示还是隐藏状态 tabs.forEach(function (tab, index) { return tab.isShow = (index === that.currentIndex); }) }, //初始化 init() { /** * 初始化标题数组 */ this.titleList = []; var that = this;//设置 this 引用 this.getTabs().forEach(function (tab, index) { that.titleList.push({ label: tab.label, name: index }); //初始化默认选中的 tab 索引 if (index === 0) { if (!that.currentIndex) { that.currentIndex = index; } } }); this.updateIsShowStatus(); }, //点击 tab 标题时，更新 value 值为相应的索引值 change: function (index) { var nav = this.titleList[index]; var name = nav.name; this.$emit('input', name); } }, watch: { //当 value 值发生改变时，更新 currentIndex value: function (val) { this.currentIndex = val; }, //当 currentIndex 值发生改变时，更新 pane 是否显示状态 currentIndex: function () { this.updateIsShowStatus(); } } });
getTabs() 中通过 this.$children 来获取定义的所有 pane 组件。因为很多地方都会用到getTabs() ，所以这里把它单独定义出来。
注意： methods 中如果存在回调函数，那么需要在外层事先定义一个 var that = this;，在 that 中引用 Vue 实例本身，也可以使用 ES2015 的箭头函数。
在初始化方法中，我们通过迭代 pane 组件，初始化了标题数组，label 取定义的标题，name 取所在的索引。 标题数组用于模板定义中。
updateIsShowStatus() 用于更新 tab 是否显示状态。之所以独立出来，是为了在监听 currentIndex 发生变化时，也能调用该方法。
在模板定义中，我们使用 v-for 指令渲染出标题，并绑定了 tabClass 函数，从而实现了动态设置样式。因为需要传参，所以不能使用计算属性。