从零实现Vue的组件库（三）-Tabs 实现

实现一个Tab组件，方便用户点击切换相关内容。

概述：Tab组件主要用来分割相关内容，方便用户点击切换，进一步游览不同类别的内容。

该组件的痛点在于：

• 内容的分发，方便自定义扩展；
• 动态扩展Tabs组件。

基础用法

卡片样式

1. 实例

代码

代码

实例地址：https://fatge.xyz/blog/juejin-example-3#/Tabs

代码地址：https://github.com/FatGe/UI-Library/tree/master/src/components/Tabs

2. 原理

主要将该组件拆分为两部分：

• 外层的Tabs用于管理data；
• 内部的Tab用于分发内容。

组件的基本结构如下图

组件的基本结构

基于这个结构，构建代码，首先

• Tab：

Tab

• 当Tab组件created时，通过this.$parent与Tabs通信，更新childrens，而destroyed时，将其从childrens中删除。

• 当前active的选项卡的id，与Tab的id相同时，证明展开的是当前选项卡。

当前active的选项卡的id，与Tab的id相同时，证明展开的是当前选项卡。

• Tabs： Tabs组件的childrens中包含所有的子Tab组件，利用它来构建选项卡

Tabs组件的childrens中包含所有的子Tab组件，利用它来构建选项卡

• 与Tab组件相同，当满足activeId === item.id时，代表当前选项卡活跃。
• 当childrens动态变化时，需要判断当前显示的Tab是否还在childrens内，如果不在则选取第一个非disabled的Tab作为显示项。

• 由于以id作为key，所以要求id唯一，添加异常提示

由于以id作为key，所以要求id唯一，添加异常提示

3. 使用

进一步将其封装成Vue的组件，配置其model，以及相关处理，当value发生变化时，将其赋值给activeId，相关Tab会自动更新。

进一步将其封装成Vue的组件

4. 总结

封装一个Tabs组件，以及简化其内部逻辑，方便后续拓展。

PS：在最开始实现时，想添加一个功能就是，缓存指定Tab组件，除了keep-alive没有想到合适的方法，如果有好的想法，可以在评论给我，我会重写这个组件。

作者：FatGe