uniapp小程序页面间数据传递与视图更新解决方案

在uni-app中，从上级页面跳转到下级页面，再返回上级页面时，页面会保留在栈中，不会重新创建。因此，当你在下级页面修改了上级页面的数据后，视图不会自动更新。

解决方法有两种：

使用vuex全局状态管理：将需要在多个页面间共享的数据存储在vuex的state中，通过mutations修改数据，再通过getters获取数据。这样，无论在哪个页面修改了数据，在其他页面都能即时更新视图。
使用uni-app提供的页面通信机制：可以通过uni.$emit和uni.$on进行跨页面通信。在上级页面中，监听事件并更新数据，然后在下级页面中触发事件。当返回上级页面时，会执行监听事件的回调函数，可以在回调函数中重新获取数据并更新视图。

下面是一个示例代码：

在上级页面中：

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    uni.$on('updateMessage', (message) => {
      this.message = message;
    });
  }
}

在下级页面中：

export default {
  methods: {
    updateMessage() {
      uni.$emit('updateMessage', 'Hello, world!');
    }
  }
}

当在下级页面中调用updateMessage方法时，会触发updateMessage事件，并将新的消息作为参数传递。上级页面会执行监听事件的回调函数，并更新message数据。这样，视图就会更新显示新的消息。

注意：在上级页面中监听事件时，要注意在页面销毁时取消监听，避免内存泄漏。可以在onUnload生命周期函数中使用uni.$off方法取消监听。

export default {
  onUnload() {
    uni.$off('updateMessage');
  }
}