了解全局事件总线（GlobalEventBus）

最新推荐文章于 2024-07-19 10:30:06 发布

x七夏

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量448

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a774578034/article/details/122307508

版权

组件间传递消息不是那么简单，比如兄弟组件之间，爷孙组件之间，这个时候可以使用全局事件总线。它是一种组件间通信的方式，适用于任意组件间通信。

步骤：

1.安装全局事件总线

new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   })

2.接收数据

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。(demo回调函数这样写避免箭头函数出现this指向不明的情况）

methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }

3.提供数据：在另一个组件中提供数据

this.$bus.$emit('xxxx',数据)`

关注