uniapp 跨页面传值：uni.$emit 和 uni.$on 的使用

在一个完整的 uniapp 应用程序中，存在着多个页面组成的应用。有时候我们需要在不同的页面之间传递数据，这时候就要用到 uniapp 提供的跨页面传值方式 —— uni.$emit 和 uni.$on。

1. uni.$emit 和 uni.$on 概述

uni.$emit 和 uni.$on 是两个方法，它们分别代表了“触发事件”和“监听事件”的功能。在 uniapp 应用程序中，我们可以在某个页面（广义上的组件）中使用 uni.$emit 方法去触发一个事件，再在另一个页面（广义上的组件）中使用 uni.$on 方法来监听这个事件，从而获得从触发事件传递的数据。

使用 uni.$emit 和 uni.$on 有以下三个优点：

可以实现跨页面传递数据的功能
不同于全局变量，它们是典型的基于事件模型的架构
对于应用程序的性能没有影响

2. uni.$emit 和 uni.$on 的使用实现

2.1 uni.$emit 的使用

uni.$emit 方法主要用于触发事情、传递数据。在页面或组件内使用 uni.$emit 方法的代码形式为：

uni.$emit('eventName', data)

eventName: String 类型，自定义的事件名称。
data: 任何类型数据，需要传递的数据。

下面是一个示例，展示了如何在页面A中触发事件并传值，供页面B消费。

// PageA.vue

export default {
  data() {
    return {
      message: 'message from PageA',
    };
  },
  methods: {
    sendMessage() {
      uni.$emit('messageFromA', this.message);
    },
  },
};

这里，我们在 PageA 中定义了一个 message 变量，用于存放需要传递的数据。在 sendMessage 方法中使用了 uni.$emit 方法，并传递了事件名称 messageFromA 和要传递的数据 this.message。

2.2 uni.$on 的使用

uni.$on 方法主要用于监听事件，实现接收被触发的事件和传递的数据。在页面或组件内使用 uni.$on 方法的代码形式为：

uni.$on('eventName', function(data) {
  // 处理被触发事件并传递的数据
})

eventName: String 类型，已定义的事件名称。
data: 任何类型数据，被触发事件携带的数据。

下面是一个示例，展示了如何在页面B中监听页面A触发的事件并获取传递的数据。

// PageB.vue

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    uni.$on('messageFromA', (data) => {
      this.message = data;
      console.log('message received from PageA: ' + this.message);
    });
  },
};

这里我们在 PageB 中使用 uni.$on 方法，监听事件 messageFromA，当事件被触发时会打印接收到的数据。