Vue (13) — 全局事件总线、消息订阅与发布

最新推荐文章于 2023-05-01 11:14:22 发布
最新推荐文章于 2023-05-01 11:14:22 发布
阅读量497 收藏
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59897687/article/details/122130153
版权
本文详细介绍了Vue应用中组件间通信的两种方式：全局事件总线（GlobalEventBus）和消息订阅与发布（pubsub）。通过安装和配置，展示了如何在不同组件中发送和接收数据，以及正确解绑和取消订阅，确保组件间的有效通信并避免内存泄漏。
摘要由CSDN通过智能技术生成

目录

一、全局事件总线（GlobalEventBus）

  1.什么是全局事件总线

  2.安装全局事件总线

  3.使用事件总线

        (1).接收数据

        (2).提供数据

  4.解绑事件

二、消息订阅与发布（pubsub）

  1.什么是pubsub

  2.使用步骤

一、全局事件总线（GlobalEventBus）

  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)

    }

        (2).提供数据

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

  4.解绑事件

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

beforeDestroy() {
        this.$bus.$off('xxxx')
    }

二、消息订阅与发布（pubsub）

  1.什么是pubsub

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

  2.使用步骤

            1.安装 pubsub : npm i pubsub-js

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

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

methods(){

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

    },

    mounted(){

        this.pid = pubsub.subscribe('xxx',this.demo)    // 订阅消息

    }

            4.提供数据：pubsub.publish('xxx',数据)

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

 

吃不到棒棒糖的小熊
关注
专栏目录
Vue3消息订阅与发布（组件间的通信）
wa_2021的博客
04-19 1万+
npm i pubsub-js 下载pubsub-js库 消息订阅(接收数据) MenuOne.vue import pubsub from 'pubsub-js' //导入 mounted() { this.pubId= pubsub.subscribe('hello',(msgName,data)=>{ //一定要用箭头函数否则this指向为undefined console.log("有人发布了消息"+msgName,data) console.l...
Vue笔记 全局事件总线（GlobalEventBus）、消息订阅与发布(PubSub)
qiaoyangla的博客
04-06 655
全局事件总线 1、一种组件间通信的方式，可以实现任意组件间通信 2、安装全局事件总线： new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) 3、使用事件总线： （1）接收数据：A组件想接收数据，则在A组价中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(d...
Vue之全局事件总线和消息订阅与发布
可爱不能当饭吃
12-12 1621
之前我们实现了子组件向父组件传递数据，很明显，这是不够的，看完这篇博客，无论哪两个组件之间传递和接收数据都没有问题！ 全局事件总线（适用于任意组件间通信） 原理：（看图理解） 主要就是通过往 x 身上放事件，然后事件的回调要放在想要获取数据的组件身上，谁要传数据就调用 x 身上对应的事件并往里面存数据就可以了，相当于一个中间商（哎，不得不说，它一出生就被利用了） 当然不是谁都能但此大任的，x 需要具备两个条件： 1. 所有组件都可以看到 2. x 身上有 $on 、$off 、$emit
‘全局事件总线’&‘消息订阅与发布’
WuHuaSen的博客
07-24 472
全局事件总线又称BUS，一种组件间通信的方式，适用于任意组件间通信。使用前我们首先需要进行全局引入,由于全局事件总线需要所有的组件都可以访问到，所以我们需要在main.js中进行全局事件总线的安装。一种组件间通信的方式，适用于任意组件间的通信；需要接受数据一方需要订阅，传递数据的一方需要消息发布，这样之后只要消息发布，订阅方就可以接收到数据。A组件想要接受数据，则在a组件中给$bus绑定自定义事件，事件的回调在a组件自身，并在销毁前进行事件的解绑。...
vue - 全局事件总线\消息订阅与发布
小多的博客
11-06 187
全局事件总线（GlobalEventBus） 一种组件间通信的方式，适用于 任意组件间通信。 安装全局事件总线： // main.js new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) 使用事件总线： 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。 methods(){ dem
Vue-全局事件总线/消息订阅与发布
奶茶控
12-09 936
前面很详细的介绍了子组件与父组件通信 以及 父组件如何与子组件通信 下面将给大家介绍两种组件间通信的方式，适用于任意组件间通信
Vue06 全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 github案例
weixin_58562753的博客
03-13 1553
全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 过度效果 配置代理_方式一二 github案例
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 496
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
Vue组件之间通信（props、自定义事件、全局事件总线、消息订阅与发布、Vuex）
花生吃花生的学习记录
10-31 1029
Vue组件之间的通信是使用组件中常用的部分。介绍几种常用的组件之间通信方式。 一、使用props配置项 props配置项主要应用与父组件与子组件进行通信。父组件------>子组件 使用方法：在组件标签中绑定属性或者方法。在子组件中使用props配置项来接收父组件传递过来的数据。 父组件中： <template> <div id="app"> <!-- 父组件给子组件传递数据，动态绑定。 --> <!-- 子组件使用props来
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
嘤嘤鸭的博客
11-28 567
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
Vue_全局事件总线、消息订阅发布！
li_aoqi的博客
07-22 891
Vue_全局事件总线、消息订阅与发布 因为我们知道使用Vue框架开发，避免不了组件化开发，那么每个组件间肯定会通信，就是需要组件间传递数据，那么Vue中 全局事件总线、消息订阅与发布都可以实现任意组件间通信。 其次，自定义事件以及props配置项也是可以通信，但只限于子组件向父组件间通信，或者说可以让组件接收到外部传来的数据。 1、Vue全局事件总线（GlobalEventBus） ⚛ 开发中较常用的一种组件间通信的方式，适用于任意组件间通信。它的本质就是“自定义事件” （1）绑定全局事件总线 需要在mia
本地存储、自定义事件、全局事件总线、消息订阅与发布【Vue】
weixin_53943447的博客
04-18 521
子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中绑定自定义事件：< Demo @zmy = "test"/ > 或 （2）第二种方式，在父组件中：（3） 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法this. $ emit('zmy', 数据)6. 组件上也可以绑定原生DOM事件，需要使用native修饰符7. 注意：通过。
22Vue VueCLI 全局事件总线 消息的订阅与发布
m0_51943115的博客
02-28 104
22Vue VueCLI 全局事件总线 消息的订阅与发布
全局事件总线,消息订阅与发布
qq_52563729的博客
03-22 122
1.一种组件间通信的方式，适用于任意组件间通信。1.接收数据:A组件想接收数据，则在A组件中给。一定要写成箭头函数，this才对。去解绑当前组件所用到的事件。事件的回调留在A组件自身。
23_全局事件总线&消息订阅与发布
xixihaha_coder的博客
03-06 347
23_全局事件总线 任意组件间通信 main.js new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this //安装全局事件总线 } }).$mount('#app') School.vue <template> <div class="demo"> <h2>学校名称:{{schoolName}}</h2>
Vue-全局事件总线-消息订阅与发布(pubsub.js)
qq_67801847的博客
08-12 137
publish:发布，subscribe:订阅。2.2：订阅消息：a:组件名称，b:接受的参数。2.在父组件中对bus绑定事件，接受数据。1.在main.js中配置bus组件。3.在孙组件中触发组件。在Vue的原型对象上配置全局组件。1.总线：任意组件的通信。pubsub.js 库。......
Vue学习：Vue中的全局事件总线和消息的订阅与发布
qq_49916504的博客
06-15 916
Vue中的全局事件总线可以任意组件间的相互通信，其原理就是创建一个东西能够让所有的组件和vm都能识别到，这个东西就可以叫做全局事件总线。
基于WCF和MSMQ构建发布/订阅消息总线（Pub/Sub Message Bus）
weixin_34233618的博客
06-14 131
基于WCF和MSMQ构建发布/订阅消息总线（Pub/Sub Message Bus）   本文是翻译Tom Hollander先生的blog文章《Building a Pub/Sub Message Bus with WCF and MSMQ》，对英文blog文章感兴趣的朋友，可以直接访问文章下面的链接。-译者：EntLib.com开源论坛小组。   这几年经常谈到采用事件驱动架构...
Vue知识点整理（三）- Vue脚手架（6）- 全局事件总线、消息订阅与发布
JHY97的博客
04-20 972
一、全局事件总线（GlobalEventBus） 1. 一种组件间的通信方式，适用于任意组件间通信 2. 安装全局事件总线（在main.js中）： new Vue({ ..... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm }, ..... }) 3. 使用事件总线 （1）接收数据：A组件想要接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组
vue全局事件总线获取属性
最新发布
09-09
您可以使用Vue的全局事件总线来获取属性。首先，在您的Vue应用程序的入口文件或任何需要使用事件总线的地方，您需要创建一个Vue实例，并将其作为事件总线。 ```javascript // main.js or any other file where you create Vue instance import Vue from 'vue' // Create a new Vue instance as event bus export const EventBus = new Vue() ``` 然后，您可以在任何组件中导入该事件总线，并使用它来发布和订阅事件。 ```javascript // ComponentA.vue import { EventBus } from 'path/to/main.js' export default { created() { // 订阅事件 EventBus.$on('eventName', this.handleEvent) }, destroyed() { // 取消订阅事件，防止内存泄漏 EventBus.$off('eventName', this.handleEvent) }, methods: { handleEvent(data) { // 处理事件 console.log(data) // 打印获取的属性值 } } } ``` ```javascript // ComponentB.vue import { EventBus } from 'path/to/main.js' export default { methods: { someMethod() { // 获取属性，并通过事件总线发布事件 const attribute = 'someValue' EventBus.$emit('eventName', attribute) } } } ``` 在上面的示例中，`ComponentB.vue`通过事件总线将属性值发送给`ComponentA.vue`，然后在`ComponentA.vue`中处理该值。通过这种方式，您可以在不通过父子组件传递的情况下在不同组件之间共享属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值