跨页面传值：uni.$emit 和 uni.$on的正确使用方法和踩坑指南

uni.emit和uni.on：跨页面交互的利器

前言

在uni-app开发中，事件总线是一个强大的工具，可以实现跨页面通信和数据共享。uni.emit和uni.on就是uni-app提供的事件总线方法，本文将深入剖析它们的用法和注意事项，帮助你掌握跨页面交互的技巧。

一、认识uni.emit和uni.on

1. uni.$emit：触发事件

uni.$emit用于触发一个事件，它的语法如下：

uni.$emit(eventName, data)

• eventName： 要触发的事件名称
• data： 要传递的数据（可选）

2. uni.$on：监听事件

uni.$on用于监听一个事件，它的语法如下：

uni.$on(eventName, callback)

• eventName： 要监听的事件名称
• callback： 事件触发时的回调函数

二、使用指南

1. 触发事件

要在页面中触发事件，可以使用uni.$emit方法，例如：

this.$emit('myEvent', { message: 'Hello World!' })

其中，'myEvent'是事件名称，{ message: 'Hello World!' }是要传递的数据。

2. 监听事件

要在页面中监听事件，可以使用uni.$on方法，例如：

this.$on('myEvent', (data) => {
  console.log(data.message) // 输出: Hello World!
})

其中，'myEvent'是事件名称，(data) => {...}是事件触发时的回调函数。

三、注意事项

1. 事件名称一致性

事件名称必须在触发和监听时保持一致，否则事件无法触发或监听。

2. 回调函数正确性

回调函数必须是一个函数，否则事件无法正确处理。

3. 事件循环

uni-app中的事件是异步触发的，因此可能存在事件循环问题。例如，A页面触发事件后，B页面可能无法及时收到该事件。

四、使用示例

示例1：在A页面触发事件，在B页面监听事件

A页面：

export default {
  methods: {
    triggerEvent() {
      this.$emit('myEvent', { message: 'Hello from A page' })
    }
  }
}

B页面：

export default {
  methods: {
    handleEvent(data) {
      console.log(data.message) // 输出: Hello from A page
    }
  },
  mounted() {
    this.$on('myEvent', this.handleEvent)
  },
  destroyed() {
    this.$off('myEvent', this.handleEvent)
  }
}

五、常见问题解答

1. 如何取消事件监听？

可以使用$off方法取消事件监听，语法如下：

this.$off(eventName, callback)

2. 如何监听多个事件？

可以多次调用$on方法监听多个事件，例如：

this.$on('event1', callback1)
this.$on('event2', callback2)

3. 如何传递多个参数？

可以通过数组或对象传递多个参数，例如：

this.$emit('myEvent', ['param1', 'param2'])

4. 如何在组件间传递数据？

可以使用emit和on方法在组件间传递数据，例如：

// 父组件
this.$emit('updateChildData', { data: 'new data' })

// 子组件
this.$on('updateChildData', (data) => {
  this.data = data
})

5. uni.emit和uni.broadcast有什么区别？

uni.emit用于触发一个事件，而uni.broadcast用于向所有子组件广播一个事件。

结论

uni.emit和uni.on是uni-app中实现跨页面交互的强大工具。通过理解它们的用法和注意事项，你可以轻松地进行跨页面通信和数据共享，从而构建更加灵活和高效的应用。