UniApp中，在页面显示时触发子组件的重新渲染

前端fighter2024-05-27 16:26

在UniApp中，要在页面显示时触发子组件的重新渲染，可以利用生命周期钩子函数来实现。具体来说，可以在页面的onShow生命周期钩子中调用子组件的方法或者改变子组件的props，从而触发子组件的重新渲染。

首先，确保子组件有一个可以触发重新渲染的方法或者props。

vue 复制代码

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
    }
  }
};
</script>

在父页面中，使用onShow生命周期钩子来调用子组件的方法。

vue 复制代码

<!-- 父页面 ParentPage.vue -->
<template>
  <view>
    <child-component ref="child"></child-component>
  </view>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.child.updateMessage(); // 调用子组件的方法
    });
  }
};
</script>

在这个例子中，当ParentPage.vue页面显示时，onShow钩子会被触发。在onShow钩子中，我们使用$nextTick来确保DOM更新完成后调用子组件的updateMessage方法，从而更新子组件的message数据，触发子组件的重新渲染。

请注意，如果使用的是props来传递数据，可以在onShow钩子中改变传递给子组件的props值，这样也可以触发子组件的重新渲染。但是，通常不建议直接修改props，而是应该通过事件或者方法来通知子组件更新数据。

另外，如果子组件使用了watch或者计算属性，那么在父组件中改变props或者调用子组件的方法也会触发这些监听器或计算属性的更新，从而导致子组件的重新渲染。