uniapp跨页面传值uni.$emit和uni.$on的使用及踩坑实战

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，当事件被触发时会打印接收到的数据。

3. 踩坑实战：uni.$emit 和 uni.$on 的常见问题

3.1 uni.$emit 和 uni.$on 需要在同一级组件中使用

uni.$emit 方法和 uni.$on 方法都需要在同一级组件中使用。如果它们被在不同的组件层次中使用，监听层层嵌套的情况，则会由于组件作用域的问题而无法触发和监听事件。

3.2 uni.$emit 和 uni.$on 必须使用相同的事件名称

在使用 uni.$emit 方法时，需定义一个事件名称。在使用 uni.$on 方法来监听这个事件时，事件名称应与在 emit 方法时定义的事件名称一致，否则监听将失效。

3.3 uni.$on 必须在组件的生命周期函数中调用

uni.$on 方法必须在组件的生命周期函数中调用，创建组件时、mounted 时，或者在 watch 等方法中都是无法正常使用的。

4. 总结

本篇文章详细讲解了 uniapp 中使用 uni.$emit 和 uni.$on 实现跨页面传值的方法，提供了两个示例供读者参考，并总结了常见问题和注意事项。

使用 uni.$emit 和 uni.$on 时，需要记得它们必须在同一级组件中使用，使用相同的事件名称，并且 uni.$on 方法必须在组件的生命周期函数中调用。