如何在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>
相关推荐
自出洞来无敌手(曾令瑶)2 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江19 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码20 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说24 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015525 分钟前
最常用的JS加解密场景MD5
前端
Hilaku26 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球32 分钟前
mo契官网建设与SEO实践
前端
蒟蒻小袁33 分钟前
力扣面试150题--全排列
算法·leetcode·面试
神仙别闹37 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c1 小时前
react当中的this指向
前端·javascript·react.js