如何在onshow中让子组件重新加载

如何在onshow中让子组件重新加载

今日bug解决记录

在开发uniapp过程中,当从当前页面返回上一级页面时,页面的子组件数据没有重新加载,导致没有展示最新数据。

知识点:

  1. uniapp组件生命周期
  • beforeCreate:在应用实例创建之前调用,适合做一些初始化操作,设置组件的默认参数、绑定事件监听器等。
  • created:应用实例创建完成后调用,可以在这里进行数据的初始化操作。
  • beforeMount:在应用挂载到页面之前调用,可以在这里对应用进行最后的修改。
  • mounted:应用挂载到页面之后调用,可以在这里进行 DOM 操作、网络请求等操作。
  • beforeUpdate:用于获取更新前的数据、记录数据的变化等。
  • updated:用于进行 DOM 操作或者交互操作,不要对数据进行修改。
  • beforeDestroy:用于进行清理操作如取消事件监听器、清除定时器等。
  • destroyed:用于进行资源的释放操作,如释放内存、断开网络连接等。

当前页面返回上一级页面时,子组件的生命周期函数mounted并不会重新加载。因此在子组件的mounted生命周期进行数据更新无效果。

2、uniapp页面生命周期

  • onLoad:在页面加载时调用,可以在这里进行数据请求等操作。
  • onShow:页面显示时调用,可以在这里进行页面状态的更新操作。
  • onReady:页面初次渲染完成后调用,可以在这里进行 DOM 操作。
  • onHide:页面隐藏时调用,可以在这里做一些隐藏处理,比如清除定时器等。
  • onUnload:页面卸载时调用,可以在这里做一些清理工作,释放资源。

当前页面返回上一级页面时,上一级页面显示,会触发页面生命周期函数onShow。因此需要在页面展示时对数据进行处理,可以在onShow里面进行处理。

解决思路

uniapp中生命周期函数onShow()会在页面显示时触发,通常用来请求数据、更新页面状态等。因此页面返回上一级页面时,必定会触发onShow函数,可以在该函数给子组件传递参数来实现子组件的重新加载。

解决代码示例

通过在父组件的onShow钩子函数中向子组件传递一个参数,从而触发子组件的更新.在父组件的 onShow 钩子函数中调用 reloadChild 方法,该方法会改变 forceUpdate 属性的值,从而触发子组件的更新。在子组件中通过监听 forceUpdate 属性的变化,在其变化时执行重新加载数据的操作。

父组件

html 复制代码
<template>
  <child :forceUpdate="forceUpdate"></child>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      forceUpdate: false
    };
  },
  methods: {
    reloadChild() {
      this.forceUpdate = !this.forceUpdate;
    }
  },
  onShow() {
    this.reloadChild();
  }
}
</script>

子组件 Child

js 复制代码
<template>
  <!-- 子组件模板 -->
</template>

<script>
export default {
  props: ['forceUpdate'],
  watch: {
    forceUpdate() {
      // 在 forceUpdate 改变时执行更新操作
      this.loadData(); // 重新加载数据
    }
  },
  methods: {
    loadData() {
      // 加载数据的逻辑
    }
  }
}
</script>
相关推荐
liliangcsdn几秒前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero4 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui7 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚9 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴10 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
7ayl14 分钟前
TCP 连接终止:四次挥手
面试
前端的日常15 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常17 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾18 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法