如何在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>
相关推荐
鹏多多7 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆15 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar21 分钟前
前端如何实现VAD说话检测?
前端
绝无仅有26 分钟前
某辅导教育大厂真实面试过程与经验总结
后端·面试·架构
绝无仅有28 分钟前
Java后端技术面试:银行业技术架构相关问题解答
后端·面试·github
CodeSheep39 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅43 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试