uni-APP兄弟组件之间的传递信息(事件总线)

事件总线:事件总线可以作为组件沟通的桥梁,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的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 监听
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WeChat624

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值