摘要：
uni.$emit(eventName,OBJECT)触发全局的自定义事件，附加参数都会传给监听器回调函数。属性类型描述eventNameString事件名OBJECTObject... uni.$emit(eventName,OBJECT)
触发全局的自定义事件，附加参数都会传给监听器回调函数。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| OBJECT | Object | 触发事件携带的附加参数 |
代码示例
uni.$emit('update',{msg:'页面更新'})uni.$on(eventName,callback)
监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
代码示例
uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })uni.$once(eventName,callback)
监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
代码示例
uni.$once('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })uni.$off([eventName, callback])
移除全局自定义事件监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | Array＜String＞ | 事件名 |
| callback | Function | 事件的回调函数 |
Tips
如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
如果同时提供了事件与回调，则只移除这个事件回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
代码示例
$emit、$on、$off常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
<template> <view class="content"> <view class="data"> <text>{{val}}</text> </view> <button type="primary" @click="comunicationOff">结束监听</button> </view> </template> <script> export default { data() { return { val: 0 } }, onLoad() { setInterval(()=>{ uni.$emit('add', { data: 2 }) },1000) uni.$on('add', this.add) }, methods: { comunicationOff() { uni.$off('add', this.add) }, add(e) { this.val += e.data } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .data { text-align: center; line-height: 40px; margin-top: 40px; } button { width: 200px; margin: 20px 0; } </style>注意事项
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
场景：用户点外卖要改地址，订单页-->地址选择页-->更改地址-->返回订单页-->地址改变了 【 订单页：】 onUnload(){ uni.$off('selectAddress') //在此生命周期里销毁地址改变事件的监听 } methods:{ changeAddress(){ //点击切换地址按钮触发此函数 uni.$on('selectAddress',(info)=>{ //开启监听全局的地址改变事件 this.address=info.address }) uni.navigateTo({ //跳转至选择地址页面 url:'/pages/user-info/info-address/info-address' }) } } 【 地址选择页：】 methods:{ handleSelect(data){ uni.$emit('selectAddress',{ //选择地址完成后，触发全局的地址改变事件，并传递参数给监听器即uni.$on。此时在订单页的uni.$on中，已经拿到了数据并将地址赋值给了address变量 address: data.address, phone: data.phone, name: data.name }) } } 注：1、$off提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器。如果只提供事件，不提供回调函数，则移除该事件所有的监听器。所以一般建议直接uni.$off('xxx')，销毁监听里不使用回调，简单粗暴好用。2、$on监听函数，拿数据用。$emit传数据用。3、如果使用了$on，请不要忘记在onUnload()生命周期里$off销毁监听，否则会重复监听。（也可不在onUnload里执行销毁，在其他地方也可）
此篇文章由DurkBlue发布，转载一下需要注明来处
