vue-封装tabs组件

之前有跟着黑马的b站教程封装了一个微信小程序的tabs组件

微信小程序-tabs切换效果组件封装_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120436232现在用vue写网页，需要个性化封装一个tabs组件（虽然elementUI有tabs组件，但是不太满足当前业务需求，所以自己重新封装一个）

组件：cjTabs.vue

从父组件传入数据源 tabs

 通过设置slot插槽，可以在调用该组件的父组件中，动态地向这个tabs组件里插入新内容，或者直接不放东西也可以，具体效果下面会进行展示

设置自定义方法，这样在使用组件的时候，能更好地使用组件功能

这里我就设置了一个叫做【tab-click】的方法，用来讲item数据返回出去给父组件，父组件中只需要在组件上声明@tab-click="fn1"，就能在fn1(item){}中拿到组件返回的数据了

---

父组件调用tabs组件 

       //tab-1
      
1
      //tab-2
      
2
      //tab-3      
      
3


。。。。
。。。。
data () {
    return {
      // 顶部横向tabs切换栏目
      tabsList: [
        {
          id: 0,
          value: 'tab1',
          isActive: true
        },
        {
          id: 1,
          value: 'tab2',
          isActive: false
        },
        {
          id: 2,
          value: 'tab3',
          isActive: false
        }
      ],
。。。。
    }
}，
methods: {
    // tabs栏目点击切换事件
    tabClick (item) {
      console.log('=======点击的tab数据=========')
      console.log(item)

      // 根据点击的tabs栏目，去发起不同的请求，获取不同的数据来渲染dataCards组件
      switch (item.value) {
        case '待办事项': // 待办事项
     // TODO:根据不同选项卡，请求不同的数据，赋值给  this.itemList  用于传给dataCards组件渲染
          console.log('1')
          break
        case '进行中': // 进行中
          console.log('2')
          break
        case '已完成': // 已完成
          console.log('3')
          break
        default:
          console.log('你点了什么？')
          break
      }
    },
}

也就是点击的tab对应的{}对象数据：

tabs组件使用效果

---

 特别注意：如果这里不用v-if   v-if-else来区分不同tab显示的内容，那么，每个tab所展示的内容将会是一样的

 例如：

 
    123456 

 这样的话，每个tab切换只是能拿到不同的tab数据，但是所展示的还是一样的内容

可以利用这一点，针对那种【内容渲染一致】，【但是数据不一样】的情况，根据不同tab获得的不同数据，来请求不同数据，然后渲染，就不用给每个tab都弄一遍html了，一套html，只是渲染的数据不一样~