正文

vue--全局事件总线&&消息订阅与发布(pubsub)

author  author  2023-03-11  211

关键词：

参考技术A 1.一种组件间通信的方式，适用于任意组件间通信

2.安装全局事件总线：

new Vue(

......

beforeCreate()

Vue.prototype.$bus = this //安装全局事件总线 $bus就是当前应用的vm

...........

)

3.使用事件总线:

(1).接收数据：A组件想接收数据。则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods()

demo(data)......

mounted()

this.$bus.$on('xxxx',this.demo)

或

mounted()

this.$bus.$on('xxxx',(data)=>

console.log('我是school组件，我收到了数据',data);

)

,

(2).提供数据： this.$bus.$emit('xxx',数据)

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

beforeDestroy()

this.$bus.$off('xxx')

1.一种组件间通信的方式，适用于任意组件间通信

2.使用步骤：

(1).安装pubsub: npm i pubsub-js

(2).引入：import pubsub from 'pubsub-js'

(3).接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

消息订阅第一种方式

mounted()

this.pubId = pubsub.subscribe('hello',(msgName,data) =>

console.log('有人发布了hello消失，hello消失的回调执行了',msgName,data);

)

,

消息订阅第二种方式

methods:

demo(msgName,data)

console.log('有人发布了hello消失，hello消失的回调执行了',msgName,data);

,

mounted()

this.pubId = pubsub.subscribe('hello',this.demo) 订阅消息

,

beforeDestroy()

pubsub.unsubscribe(this.pubId)

(4).提供数据： pubsub.publish('hello',this.name)

(5).最好在 beforeDestroy钩子中，用 pubsub.unsubscribe(this.pubId)取消订阅

vue组件间通信全局事件总线订阅与发布(代码片段)

目录一、全局事件总线作用安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示二、订阅与发布安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示一、全局事件总... 查看详情

vue的全局事件总线(代码片段)

我们使用vue的过程中，会有很多时候要用到组件间的通信，组件间的通信也有很多种，比如父子组件通信，兄弟组件通信，任意组件间的通信解决组件间的通信也有很多方法，$emit父子组件的通信可用事件... 查看详情

vue3全局事件总线学习

vue3全局事件总线参考：https://blog.csdn.net/mfxcyh/article/details/124167423 查看详情

尚硅谷vue系列教程学习笔记(代码片段)

...件-解绑082-组件自定义事件-总结083-TodoList-自定义事件084-全局事件总线1085-全局事件总线2086-TodoList案例-使用事件总线087-消息订阅与发布088-TodoList案例-使用消息订阅和接收方法实现089-TodoList案例-编辑090-$nextTrick081-组件自定义事件... 查看详情

laravel事件&订阅

阅读目录事件&订阅理解1、生成事件和订阅2、注册订阅者3、为订阅者绑定事件4、事件参数5、订阅者增加业务处理-库存操作6、调用事件触发订阅行为7、结果源码新生成的文件IncreaseStockEvent.phpReduceStockEvent.phpStockSubscribe.php注... 查看详情

React.js - 通量与全局事件总线

】React.js-通量与全局事件总线【英文标题】：React.js-fluxvsglobaleventbus【发布时间】：2015-06-2023:21:14【问题描述】：与全局事件总线相比，使用Flux有什么优势？我认为调度程序就是所需要的：组件将带有数据的“用户事件”发布到... 查看详情

vue事件总线实例（全局事件）(代码片段)

得到事件总线对象//src/assets/js/event-bus.jsimportVuefrom'vue'exportconstEventBus=newVue()注册监听事件<script>importEventBusfrom'@/assets/js/event-bus.js'exportdefaultname:'Custome 查看详情

vue父子组件间通信（数据传递）

参考技术A父---props--->子子---props/自定义事件/全局事件总线/消息订阅与发布--->父任意组件间通信：/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参父组件传递：在使用子组件时，使用v-bind：自定义接收名称="要传递... 查看详情

领域事件

一、简介领域事件是领域模型中一个重要的组成部分，它主要用来捕获一些已经发生的事，然后针对捕获到的事件进行处理。如果你熟悉发布订阅、观察者、事件驱动、事件总线之类相关的知识想必会很容易理解什么是领域事件... 查看详情

vue事件总线eventbus的概念、使用

...ventBus的概念来传递数据EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件因为是全局的一个'仓库'，所以初始化要在全局初始化(main.js)有两个组件A和B需要通信，他们不是父子组件关系，... 查看详情

vue2.0学习—全局事件总线globaleventbus（六十一）(代码片段)

【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）知识回顾：全局事件总线(GlobalEventBus)一种组件间通信的方式，适用于任意组件间通信安装全局事件总线：使用事件总线：接收数据：A组件想接收数据... 查看详情

vue2eventbus事件总线|实现组件间的通信&改变大屏背景颜色实践(代码片段)

效果：创建实例在src/utils/下新建event-bus.js:/***事件总线*/importVuefrom'vue'exportconstEventBus=newVue()子组件screen.vue:<template><a-formclass="dark"layout="horizontal":label-col="span:6":wrapper-col="span:14,o... 查看详情

在laravel应用程序中从父组件向子组件发出vue事件而不使用事件总线

】在laravel应用程序中从父组件向子组件发出vue事件而不使用事件总线【英文标题】：Emittingavueeventfromparenttochildcomponentinalaravelapplicationwithoutusingeventbus【发布时间】：2021-04-0214:48:21【问题描述】：我似乎记得能够通过在相应子组... 查看详情

vue进阶知识总结(代码片段)

...)插件scoped样式总结TodoList案例webStorage组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布（pubsub）nextTickVue封装的过度与动画vue脚手架配置代理方查看详情

vue2.0—全局事件总线globaleventbus（十九）(代码片段)

【Vue2.0】—全局事件总线GlobalEventBus（十九）main.jsimportVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=false//创建vmnewVue(el:'#app',render:h=>h(App),beforeCreate()//安装全局事件总线Vue.prototype.$bus=this)Schoo... 查看详情

vue3全局事件总线mitt库(代码片段)

...除了$on、$off和$once方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：Vue3官方有推荐一些库，例如mitt或tiny-emitter；这里我们主要讲解一下mitt库的使用；首先，我们需要先安装这个库&... 查看详情

消息总线 vs. 服务总线 vs. 事件中心 vs. 事件网格

】消息总线vs.服务总线vs.事件中心vs.事件网格【英文标题】：Messagebusvs.Servicebusvs.EventhubvsEventgrid【发布时间】：2020-01-0412:53:16【问题描述】：我正在学习消息传递系统，但对这些术语感到困惑。以下所有消息传递系统都在具有不... 查看详情