全局事件总线的运用理解

全局事件总线的运用理解,第1张

1.需要用到事件触发api:$emit,绑定事件api:$on,在组件实例对象上绑定或者说创建一个属性(总线)$bus

在vue实例上绑定一个傀儡一个假的实例对象:

new Vue({
el:'app',
render:h=>h(app),
boferCreat(){
Vue.prototype.$bus = this
    }
})
//在其他组件身上就可以往$bus上用$on绑定事件,如果有其他组件想传值,就使用$emit触发该事件

2.作用:能实现任意组件间的通信。

3.原理浅析:AB两个组件,B 想传值给A组件,那么就需要在A里面为X绑定事件(get),事件回调在A组件里面,X的原型对象上就会拥有该事件,而X是需要一开始被绑定在唯一唯一的vue原型对象上,即App的原型对象上即vm,所以说在B组件,可以通过$emit触发x上的事件,并携带在B组件里面的参数数据,所以A组件里面的回调就被触发了,并收到参数,从而实现组件间的通信。

如图所示:

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1321247.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-12
下一篇2022-06-12

发表评论

登录后才能评论

评论列表(0条)

    保存