uni-app 中uni.$emit 和 uni.$on
时间: 2024-02-11 15:00:45 浏览: 148
uni.$emit和uni.$on是uni-app中用于组件间通信的两个方法。其中,uni.$emit用于触发一个事件,并传递参数,而uni.$on则用于监听这个事件,并在事件触发时执行相应的回调函数。下面是一个示例代码:
```
// A页面
uni.$emit('eventName', {param: 'value'});
// B页面
uni.$on('eventName', function(data) {
console.log(data.param); // 输出'value'
});
```
需要注意的是,uni.$on必须在组件的生命周期函数中调用,否则可能会出现监听不到事件的情况。
相关问题
uni-app里的uni.$on()是什么方法
`uni.$on()`是uni-app框架中的一个事件监听方法,用于在全局或组件内监听自定义事件。具体来说,它的作用是注册一个事件监听器,当事件触发时执行回调函数。
其语法如下:
```
uni.$on(event, callback)
```
其中,`event`是要监听的事件名,`callback`是事件触发时要执行的回调函数。
该方法返回一个取消监听的函数,可以用于取消事件的监听。
举个例子,如果要全局监听一个名为`my-event`的事件,可以在`App.vue`中使用以下代码:
```
uni.$on('my-event', function (data) {
console.log('my-event触发了,携带的数据为:', data)
})
```
然后,在任何页面或组件中触发该事件时,上述回调函数都会被执行。例如,在某个页面中:
```
uni.$emit('my-event', {name: '张三', age: 18})
```
这样就可以触发`my-event`事件,并将`{name: '张三', age: 18}`作为参数传递给事件监听器,从而实现全局通信。
uni.$emit 和uni.$on
uni.$emit和uni.$on是uni-app框架中用于组件间通信的方法。
uni.$emit是在组件中触发自定义事件的方法。可以通过uni.$emit(eventName, data)来触发一个自定义事件,并且可以传递一些数据。其他组件可以通过uni.$on(eventName, callback)来监听该事件,并在事件触发时执行相应的回调函数。
例如,在组件A中使用uni.$emit触发一个自定义事件:
```javascript
uni.$emit('customEvent', { message: 'Hello' });
```
然后,在组件B中使用uni.$on来监听该事件,并执行回调函数:
```javascript
uni.$on('customEvent', (data) => {
console.log(data.message); // 输出:Hello
});
```
这样,在组件A触发customEvent事件时,组件B就能接收到该事件并执行相应的回调函数。
需要注意的是,使用uni.$emit和uni.$on进行组件间通信时,被监听的组件应该在合适的时机调用uni.$off(eventName)来取消对事件的监听,以避免内存泄漏。
阅读全文