设计细节

1. 结构分明。为了让结构层次更明显，在tabs-head里面有子组件tabs-item，在tabs-body里面有子组件tabs-pane，表示各自的标签与内容。

   但结构分明的同时也有些许缺陷，就是tabs-item和tabs-pane都要加上相同的name属性，对于喜欢“偷懒”的程序猿来说，多写一遍属性是比较麻烦的事情。

功能细节

1. 组件通信。由于存在爷 -> 父 -> 孙组件的通信，为了让通信更方便，使用provide和inject。

2. 事件通信。还是上面的原因，为了让多层组件的通信更简单，这里使用了事件总线eventBus，通过new一个vue实例，将这个实例通过provide传递，inject接收，来实现组件之间的事件通信。

   // tabs.vue
   
   import Vue from 'vue'
   export default {
     name: "YvTabs",
     provide() {
       return {
         eventBus: this.eventBus
       }
     },
   	// ...
     data() {
       return {
         eventBus: new Vue()
       }
     },
   	// ...
   }

人工测试

手动测试。。。已完成。

自动化测试

在test文件夹下增加tabs.test.js和tabs-item.test.js文件。

因为tabs-pane和tabs-item基本一致，这里就不再做自动化测试了。

tabs.test.js文件有2个测试用例：测试tabs是否存在、接收selected；

tabs-item.test.js文件有4个测试用例：测试tabs-item是否存在、接收name、接收disabled、点击事件。

运行命令parcel watch test/* --no-cache和karma start查看测试结果：

vuepress

在docs/.vuepress/components文件夹下增加多个tabs-demo的vue文件，内容就是我们要展示的tabs示例，然后在docs/components文件夹下增加tabs的md文件，内容就是放置整个tabs组件说明。

具体内容请访问这里。