如何在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 作者：温暖前端