【Vue项目复习笔记】TabControl点击切换商品

我们之前在

<goods-list :goods="goods['pop'].list"></goods-list>

直接传入的是pop，已经写死了，但是在实际应用中，这里应该是一个变量。我们应该动态的来决定是哪一个类型。
首先的话，我们需要内部监听点击，之前我们内部也监听点击了，但是并没有将内部发生点击这个事件传递到外面去。
我们在TabControl中的

 methods: {
    itemClick(index) {
      // 点击后把index传给 currentIndex
      this.currentIndex = index;
      //因为我们要监听点击，要将我们点击的下标传出去
      this.$emit('tabClick', index)
     }
  }

在Home.vue中接收这个点击事件

  <tab-control  :titles="['流行','新款','精选']" @tabClick="tabClick"></tab-control>

先在data中默认一个当前类型为pop

  data(){
    // 这个用来存储上面请求过来的数据，因为上面请求是一个局部变量，请求完了以后，会有垃圾回收机制发挥作用，所以我们需要添加变量用来保存它
    return{
      banners:[],
      recommends:[],
      goods: {
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },
      //默认当前类型为type
      currentType:'pop'
    }
  },

在methods中：如果index为0的话，默认它的currentType=‘pop’

 tabClick(index) {
        switch (index){
          case 0:
            this.currentType='pop'
            break
          case 1:
            this.currentType='new'
            break
          case 2:
            this.currentType='sell'
            break
        }
      },

然后在Home.vue中

  <goods-list :goods="goods[currentType].list"></goods-list>

因为上面：goods后面一大串，带着不太好看，我们将其再进行一个处理

 computed:{
    showGoods(){
      return this.goods[this.currentType].list
    },
  },

然后

  <goods-list :goods="showGoods"></goods-list>

将默认的pop换成currentType完成点击切换商品的操作，效果如下：