关键词

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 方法必须在组件的生命周期函数中调用。

本文链接:http://task.lmcjl.com/news/8524.html

展开阅读全文