Vue笔记全局事件总线（GlobalEventBus）、消息订阅与发布(PubSub)

最新推荐文章于 2022-08-30 23:58:46 发布

翘阳啦

最新推荐文章于 2022-08-30 23:58:46 发布

阅读量629

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qiaoyangla/article/details/123990856

版权

本文探讨了Vue.js中两种组件间通信的方法：全局事件总线和PubSub。全局事件总线通过在Vue实例上创建自定义事件进行通信，包括如何安装、接收和提供数据，并强调在组件销毁前解除绑定。PubSub是一种消息订阅发布机制，涉及安装、引入、订阅、发布数据及在组件销毁时取消订阅的步骤。

摘要由CSDN通过智能技术生成

全局事件总线

1、一种组件间通信的方式，可以实现任意组件间通信

2、安装全局事件总线：

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

3、使用事件总线：

（1）接收数据：A组件想接收数据，则在A组价中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){
   demo(data){......}
}

...

mounted(){
   this.$bus.$on('xxx',this.demo)
}

（2）提供数据：this.$bus.$on('xxxx',数据)

4、最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

关注