Uni-app—两个页面数据传输大揭秘

uni-app 数据传递指南：5 种有效方法

概述

在 uni-app 开发中，数据传递至关重要，例如从列表页将数据传递到详情页。本文将介绍 5 种 在 uni-app 中实现数据传递的常用方法：路由传参、全局变量、事件总线、组件通信和 Vuex。每种方法都将详细说明其优缺点，并提供代码示例。

1. 路由传参

路由传参是最简单的数据传递方式。它通过路由对象的 query 属性传递数据。

优点：

• 简单易用
• 适合传递简单数据类型

缺点：

• 只能传递简单数据类型
• 容易造成 URL 冗长

代码示例：

// 列表页
uni.navigateTo({
  url: '/pages/detail/detail',
  query: {
    id: 1,
    name: '张三'
  }
});

// 详情页
const id = uni.getPageInfo().query.id;
const name = uni.getPageInfo().query.name;

2. 全局变量

全局变量是另一种常见的数据传递方式。它通过 getApp() 方法获取和设置全局变量。

优点：

• 简单易用
• 适用于所有页面

缺点：

• 容易造成变量污染
• 不利于代码维护

代码示例：

// 列表页
const app = getApp();
app.globalData.data = {
  id: 1,
  name: '张三'
};

// 详情页
const app = getApp();
const data = app.globalData.data;

3. 事件总线

事件总线是一种组件间通信的方式。它通过 $emit() 触发事件，并使用 $on() 监听事件。

优点：

• 灵活且可扩展
• 适用于组件间任意通信

缺点：

• 相对复杂，需要良好代码组织
• 容易造成事件污染

代码示例：

// 列表页
this.$emit('data-transfer', {
  id: 1,
  name: '张三'
});

// 详情页
this.$on('data-transfer', (data) => {
  this.id = data.id;
  this.name = data.name;
});

4. 组件通信

组件通信通过 props 和 ref 实现。props 用于父组件向子组件传递数据，而 ref 用于子组件获取父组件的引用。

优点：

• 灵活且可扩展
• 适用于组件间任意通信

缺点：

• 相对复杂，需要良好代码组织
• 容易造成代码耦合

代码示例：

// 列表页
<detail :data="data"></detail>

// 详情页
<script>
export default {
  props: ['data'],
  mounted() {
    console.log(this.data);
  }
}
</script>

5. Vuex

Vuex 是一个状态管理工具，用于共享和管理组件间状态。

优点：

• 集中式状态管理
• 支持复杂数据结构
• 可用于全局和局部状态管理

缺点：

• 相对复杂，需要良好代码组织
• 引入额外依赖

代码示例：

// 列表页
this.$store.commit('setData', {
  id: 1,
  name: '张三'
});

// 详情页
const data = this.$store.state.data;

总结

本文介绍了 uni-app 中常用的 5 种 数据传递方法。每种方法都有其优缺点，开发者可以根据需求选择合适的方式。

常见问题解答

1. 路由传参和全局变量有什么区别？

路由传参只能传递简单数据类型，而全局变量可以传递复杂数据结构。

2. 事件总线和组件通信有什么区别？

事件总线更适合组件间任意通信，而组件通信更适合父组件向子组件传递数据。

3. Vuex 和其他方法有什么优势？

Vuex 支持集中式状态管理，可用于全局和局部状态管理，并且支持复杂数据结构。

4. 如何选择合适的数据传递方式？

根据数据类型、数据量和组件间关系选择合适的方式。

5. 如何避免数据传递中的错误？

• 明确数据传递的方向和类型
• 使用适当的命名约定
• 对传递的数据进行验证