全局事件总线的运用理解

Mr.wr

已于 2022-05-21 15:57:39 修改

阅读量236

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-21 15:55:27 首次发布

本文链接：https://blog.csdn.net/loveuyy/article/details/124898845

版权

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组件里面的回调就被触发了，并收到参数，从而实现组件间的通信。

如图所示：