Vue自定义嵌套组件：Tab切换

最新推荐文章于 2024-05-18 18:15:28 发布

liberg

最新推荐文章于 2024-05-18 18:15:28 发布

阅读量2.3k

点赞数 1

分类专栏： Web/H5/小程序文章标签： vue vue自定义组件 vue tab自定义

本文系博主原创，转载请注明原文链接：Liberg的CSDN博客

本文链接：https://blog.csdn.net/linysuccess/article/details/100708174

版权

Web/H5/小程序专栏收录该内容

50 篇文章 3 订阅

订阅专栏

VueJs的一大特色（也是优势）就是提供了组件化渐进式地构建前端界面的基础设施。采用组件化的思维来构建Tab切换功能，html模板大抵是这样的：

<jxm-tabs>
  <jxm-tab title="标签1">
    内容1
  </jxm-tab>
  <jxm-tab title="标签2">
    内容2
  </jxm-tab>
  <jxm-tab title="标签3">
    内容3
  </jxm-tab>
</jxm-tabs>

需要实现jxm-tabs/jxm-tab两层嵌套组件，用到了VueJs提供的组件开发的大部分功能，包括slot/ref/provide()/inject等等，很适合在VueJs的学习过程中练练手。最终效果如下：
Vue自定义Tab组件
这也是本人学习VueJS练手的第一个组件：https://github.com/linysuccess/vue-tabs-demo