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

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切换_第1张图片
这也是本人学习VueJS练手的第一个组件:https://github.com/linysuccess/vue-tabs-demo

你可能感兴趣的:(Web/H5/小程序)