[JavaScript知识库]切换tab动态加载不同的组件

在项目开发中，经常会遇到，切换不同的tab页，展示不同的数据的需求。不同的应用场景需求不一样，有的需要切换tab页，不时时网络请求数据，这就需要做数据缓存，components组件本身就加载一次，数据可以缓存；有的需求则就需要动态加载，那么我们怎么做呢，可以通过用refs来调用子组件的网络请求方法。
（一）index界面
index界面通过v-show绑定了不同的界面，根据不同的tab，来控制数界面的切换。

<div class="rewardIndex">
    <div class="drop">
      <van-dropdown-menu active-color="#0179F9">
        <van-dropdown-item v-model="dropValue" :options="dropOptions" @change="onChange" />
      </van-dropdown-menu>
      <img src="@/assets/components/back.png" class="back" @click="$router.back()" />
    </div>
    <NationalTab
      v-show="dropValue==0"
      v-if="dropOptionsCodes.length>0"
      :actLevelCode="dropOptionsCodes[0]"
      :change="isChange"
      ref="nationTabRef"
    />
    <ProvinceTab
      v-show="dropValue==1"
      v-if="dropOptionsCodes.length>0"
      :actLevelCode="dropOptionsCodes[1]"
      :change="isChange"
      ref="provinceTabRef"
    />
  </div>

在index界面的onchange（）方法做监听

  onChange(value) {
      localStorage.setItem("dropValue", value);
      this.dropValue === 0
        ? this.$refs.nationTabRef.switchToMe()
        : this.$refs.provinceTabRef.switchToMe();
      this.isChange = true;
    },

（二）在子组件编写switchToMe()方法

switchToMe(){
      console.log("new111");
      this.getActivityList();
      this.showProductPraiseAPPList();
      this.getAwardAndRecommend();
      this.getExcellentProductForApp();
    }

这样就可以实现动态加载tab页的数据了，以此记录解决这种问题的处理方法。