uniapp 如何实现页面间数据传递

在uniapp开发中，页面间数据传递是一项基础且关键的功能，它能让不同页面之间实现信息交互，极大提升应用的功能完整性与用户体验。以下为您详细介绍几种常见的实现方式。

一、通过路由参数传递数据

这是最常用的方法之一。在发起跳转的页面，通过 navigateTo、redirectTo 或 switchTab 等 API 在路径后添加参数。例如：

uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=uniapp'
});

在目标页面的 onLoad 生命周期函数中接收参数：

onLoad: function (options) {
  const id = options.id;
  const name = options.name;
  console.log(id, name);
}

此方法简单直接，但传递的数据量有限，适合传递少量简单数据。

二、使用事件总线（Event Bus）

创建一个全局的事件总线对象，在需要传递数据的页面引入该对象，发送数据时触发事件，接收数据时监听事件。首先创建一个 eventBus.js 文件：

import Vue from 'vue';
export const eventBus = new Vue();

在发送数据的页面：

import { eventBus } from '@/utils/eventBus.js';
eventBus.$emit('dataUpdate', { message: '这是传递的数据' });

在接收数据的页面：

import { eventBus } from '@/utils/eventBus.js';
export default {
  created() {
    eventBus.$on('dataUpdate', (data) => {
      console.log(data);
    });
  }
}

这种方式适合兄弟组件或跨级组件间的数据传递，不受页面层级关系的限制。

三、Vuex 状态管理库

如果项目较为复杂，数据传递频繁且需要集中管理数据，Vuex 是很好的选择。安装并引入 Vuex 后，在 store 目录下定义 state、mutations、actions 等。 在发送数据的页面提交 mutation 修改 state：

this.$store.commit('updateData', { newData: '新的数据' });

在接收数据的页面通过计算属性获取 state 中的数据：

computed: {
  getData() {
    return this.$store.state.data;
  }
}

Vuex 使得数据流向清晰，方便维护和调试。

掌握这些 uniapp 页面间数据传递的方法，能让开发者更高效地构建功能丰富、交互流畅的应用程序。