#独家
vue 使用 keep-alive 包裹了一个带 tab 切换的瀑布流组件,切换tab后,瀑布流还会请求上一次的接口?

2023-04-25 0 3,501

使用 vue2 + vant2 的项目
使用 vant tabs 组件包裹了一个瀑布流组件,切换每个 tab,瀑布流会无限刷新。
现在的问题是,切换完所有 tab 后,再切回第一个 tab,滑动页面,请求的数据还是最后一个被 keep-alive 缓存住的数据。
查了很多资料上说使用 activated() 钩子去清除缓存,重新请求数据。请问要怎么做呢?
我的需求是每次切换 tab,需要保留缓存数据,不能每次都销毁组件再新建。

<van-tabs v-model="active">
    <van-tab
        v-for="(item, index) in list"
        :key="index"
        :title="item.name"
      >
        <keep-alive>
            <component
                v-if="active === index"
                :is="item.componentName"
                :key="'item_' + index"
              />
        </keep-alive>
    </van-tab>
</van-tabs>

你可以添加一个activated钩子:

export default {
  // ...
  activated() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 这里添加你的数据请求逻辑
    },
  },
};

然后,在你的父组件中,你可以用watch来监听active属性的变化:

export default {
  // ...
  watch: {
    active(newVal, oldVal) {
      // 触发子组件的 fetchData 方法
      this.$refs['item_' + newVal][0].fetchData();
    },
  },
};

你要为每个瀑布流组件添加ref属性:

<keep-alive>
  <component
    v-if="active === index"
    :is="item.componentName"
    :key="'item_' + index"
    :ref="'item_' + index"
  />
</keep-alive>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 vue 使用 keep-alive 包裹了一个带 tab 切换的瀑布流组件,切换tab后,瀑布流还会请求上一次的接口? https://www.jiaruvip.com/1655.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务