点击每一个 tab 标题时，会触发 change()，来更新 value 值为相应的索引值。在 watch 中，我们监听了 value 值，当 value 值发生改变时，更新 currentIndex。也监听了 currentIndex 值，当 currentIndex 值发生改变时，更新 pane 是否显示状态。
总结如下：
使用组件嵌套方式，将多个 pane 组件作为 tabs 组件的 slot。
tabs 组件与 pane 组件，通过父子链（即 $parent 与 $children）实现通信。
样式：
[v-cloak] { display: none; } .tabs { font-size: 14px; color: #657180; } .tabs-bar:after { content: ''; display: block; width: 100%; height: 1px; background: #d7dde4; margin-top: -1px; } .tabs-tab { display: inline-block; padding: 4px 16px; margin-right: 6px; background: #fff; border: 1px solid #d7dde4; cursor: pointer; position: relative; } .tabs-tab:hover { color: #336699; font-weight: bolder; } .tabs-tab-active { color: #336699; border-top: 1px solid #336699; border-bottom: 1px solid #fff; } .tabs-tab-active:before { content: ''; display: block; height: 1px; background: #3399ff; position: absolute; top: 0; left: 0; right: 0; } .tabs_content { padding: 8px 0; } .pane { margin-top: 26px; font-size: 16px; line-height: 24px; color: #333; text-align: justify; }
效果：
2 关闭属性
我们为 pane 组件新增一个 closable 属性，用于控制该标签是否可关闭。
在子窗口组件的 props 中，新增 closable 属性：
props: { ... //是否可关闭 closable: { type: Boolean, default: false } }
在标签页组件中的模板中，新增关闭标签：
... template: '\ <div>\ <div>\ <!-- 标签页标题-->\ <div :class="tabClass(item)"\ v-for="(item, index) in titleList"\ @click="change(index)">\ {{ item.label }}\ <span v-if="item.closable" @click="close(index,item.name)"></span>\ </div>\ </div>\ <div>\ <!-- pane 组件位置-->\ <slot></slot>\ </div>\ </div>', ...
这里使用 v-if 指令，根据 closable 的值来判断是否构建 “关闭” 标签。
点击事件绑定了 close() 函数，传入标签所在索引以及标签的名称。
在标签页组件中的方法中，新增了 close()，用于执行关闭标签页逻辑：
close: function (index, name) { //删除对应的标题元素 this.titleList.splice(index, 1); var tabs = this.getTabs(); var that = this; //迭代判断并设置点击的标签页是隐藏状态 tabs.forEach(function (tab, index) { if (index === name) { return tab.isShow = false; } }); }
首先在标题数组中删除对应的标题元素，因为 Vue.js 的核心是数据与视图的双向绑定。因此当我们修改数组时， Vue.js 就会检测到数组发生了变化，所以用 v-for 渲染的视图也会同步更新 。
接着，隐藏对应的 tab 内容，我们通过传入的 name 与某个 tab 中的 index，逐一比对，如果确定是我们需要关闭的标签页，那么就隐藏其内容。其实这里使用 key 来表达更合适。
新增的样式：
.close{ color: #FF6666; } .close::before { content: "\2716"; } .close:hover { color: #990033; font-weight: bolder; }
为需要添加关闭标签的 pane ，添加 closable 属性：
<div v-cloak> <tabs v-model="activeIndex"> <pane label="科技" closable="true"> 火星疑似发现“外星人墓地”？至今无法解释 </pane> <pane label="体育"> 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠 </pane> <pane label="娱乐" closable="true"> 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》 </pane> </tabs> </div>
效果：
3 切换动画
我们在切换标签页时，加上滑动动画吧，这很简单，只要在激活的样式中加上 transform 与 transition 样式即可：
.tabs-tab-active { color: #336699; border-top: 1px solid #336699; border-bottom: 1px solid #fff; transform:translateY(-1px); transition: transform 0.5s; }
效果：
我们让标签页标题被点击时，以动画的形式往上移动 1 个像素。是不是很酷呀O(∩_∩)O~
总结