事件总线:事件总线可以作为组件沟通的桥梁,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。
注:son4 和 son5 为两个组件名称,将这两个组件引入到一个父组件中。
1.触发事件:
son4中:
<button type="default" @click="change">事件总线</button>
change(){
uni.$emit('xiong',{msg:'兄弟传的数值'})
}
2.监听事件:(写在created中)这里写成箭头函数是为了不会改变this的值。
son5中:
uni.$on('xiong',(data)=>{
console.log(data)
}),
//其中,xiong是名字,相同的名字。
3.只监听一次:(写在created中)
son5中:
uni.$once('xiong1',(data)=>{
console.log(data)
})
4.移除监听:(写在methods中)
son4:
<button type="default" @click="clear">消除</button>
clear(){
uni.$off()//移除所有
uni.$off('xiong')//移除单个
}
5.注意事项
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器;
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
6.注意事项
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听