Uniapp 中页面间传参与回传的实现方法

在Uniapp开发中，页面间的传参和回传是非常常见的需求。合理地实现页面间的数据传递和交互，能够提升应用的用户体验和功能完整性。下面将介绍一些常用的实现方法。

页面间传参

• URL参数传递：这是一种简单直接的方式。在导航到新页面时，可以通过在URL中添加参数来传递数据。例如，使用uni.navigateTo方法时，在url参数中添加需要传递的数据，如uni.navigateTo({ url: 'newPage?id=123&name=test' })。在目标页面中，可以通过this.$route.query获取传递过来的参数。
• 全局事件总线：通过创建一个全局的事件总线对象，在发送页面触发一个自定义事件，并将数据作为参数传递。在接收页面监听该事件，当事件触发时获取传递的数据。这种方式适用于跨页面、组件间的通信。

页面回传数据

• 事件回调：在打开新页面时，可以通过uni.navigateTo的events参数定义一个回调函数。当新页面需要回传数据时，通过this.$emit触发该回调函数，并将数据作为参数传递回去。例如：

uni.navigateTo({
  url: 'newPage',
  events: {
    backData: function(data) {
      console.log(data);
    }
  }
});

在新页面中，通过this.$emit('backData', { key: 'value' })回传数据。

• 本地存储：新页面将需要回传的数据存储到本地存储中，当返回上一页时，上一页从本地存储中获取数据。这种方式适用于一些简单的数据回传场景，但要注意及时清理本地存储，避免数据冗余。

在实际开发中，需要根据具体的业务需求和场景选择合适的页面间传参和回传方法。URL参数传递适合简单的参数传递；全局事件总线适用于复杂的跨页面通信；事件回调能方便地实现页面间的数据交互；本地存储则可作为一种辅助手段。通过合理运用这些方法，能够实现高效、灵活的页面间数据传递和交互，为用户提供更好的应用体验。