如何在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 属性的变化,在其变化时执行重新加载数据的操作。

父组件

<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

<template>
  <!-- 子组件模板 -->
</template>

<script>
export default {
  props: ['forceUpdate'],
  watch: {
    forceUpdate() {
      // 在 forceUpdate 改变时执行更新操作
      this.loadData(); // 重新加载数据
    }
  },
  methods: {
    loadData() {
      // 加载数据的逻辑
    }
  }
}
</script>

原文链接:https://juejin.cn/post/7348643764347584523 作者:温暖前端

(0)
上一篇 2024年3月22日 上午11:04
下一篇 2024年3月22日 上午11:14

相关推荐

发表回复

登录后才能评论