Vue实现同页面多个标签页动态切换

实现结果

分析

问题：对于Vue一个组件中的多个子组件，每个子组件都会拥有自己的categoryItem，这些categoryItem会使得传入index并获取时产生疑问：
document.getElementsByClassName("categoryItem")[i]中到底如何获取现在被激活的categoryItem呢

解决

解决：父组件传入当前子组件的起始index，子组件将根据起始index判断现在被激活的是页面中的哪个categoryItem。
父组件：

<OtherProduct  :order = 2/>

子组件：

    changeFocused(index) {
      index = index+this.order_
      //index：当前移入元素是第几-1个categoryItem
      let item;
      for (let i = this.order_; i < this.order_+this.categoryLength; i++) {
        item = document.getElementsByClassName("categoryItem")[i];
        if (i == index) {
          //当前移入的元素
          //则不应该有hide
          if (item.className.search("hide") > 0) {
            item.className = "categoryItem";
          }
        } else {
          //当前没有移入的元素
          //则应该有hide
          if (item.className.search("hide") < 0) {
            item.className += " hide";
          }
        }
      }
    }