Vue全局事件总线（GlobalEventBus)

最新推荐文章于 2024-03-23 09:47:01 发布
最新推荐文章于 2024-03-23 09:47:01 发布
阅读量262 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stead_Fast/article/details/119610345
版权
本文介绍了Vue全局事件总线的安装和使用方法，通过全局事件总线实现不同组件之间的通信。在组件销毁时需要注意解绑事件，以避免内存泄漏。
摘要由CSDN通过智能技术生成

意义：实现任意组件间的通信
请添加图片描述
保证：1.所有组件都能找到x

2.x可以调用到$on,$off,$emit

安装全局事件总线

main.js里创建Vue实例时，在beforeCreate()钩子中配置$bus，$bus就是当前应用的vm

new Vue({
   
	el:'#app',
	render:h => h
最低0.47元/天 解锁文章
慕宁儿
关注
专栏目录
Vue全局事件总线
weixin_47810787的博客
12-15 632
Vue全局事件总线 （1）绑定全局事件总线 在main.js构造Vm对象实例 Vue.prototype.$bus=new Vue() (2)使用事件总线 使用事件总线，加入组件A向组件B通信，A组件提供数据，B组件接收数据 提供数据 this.$bus.$emit('事件名'，数据) 接收数据 this.$bus.$on('事件名'，回调函数) 组件事件销毁解绑 最好在beforeCreate钩子中，用$off去解绑当前组件索通到的事件 this.$bus.$off('事件名') A组件向B组件发送
全局事件总线
薛定谔的猫
03-26 250
但这俩种方法都太麻烦了，因此我们可以在Vue.prototype绑定x，因为原型链的关系所有的vc实例都能访问到vue实例上的属性。但是它是不具备$on,$off,$emit方法的，因为它只是一个object对象，它没有这个属性就要去找object原型对象中找这个属性，那肯定是没有的，为什么？要不然它身上的东西太多了。接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的``回调留在A组件自身。收数据的人去绑定事件总线上的自定义事件。
Vue-全局事件总线
最新发布
m0_64081601的博客
03-23 2761
在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。
Vue 全局事件总线
Errol's Blog
04-10 8492
Vue 全局事件总线
Vue之全局事件总线
zqr4818的博客
06-07 478
Vue之全局事件总线
Vue的全局事件总线
ykh12345678的博客
05-16 246
安装全局事件总线，指定总线名为 $bus 绑定事件，并指定事件被调用时的回调函数 在其他组件中调用绑定的事件，并传递相应的参数，绑定事件的组件就可以接收到其他组件传来的数据。 为了保证事件名不冲突，最好在绑定事件的组件上，增加解绑的操作，就是当组件销毁的时候解绑该事件。 ...
Vue笔记 全局事件总线（GlobalEventBus）、消息订阅与发布(PubSub)
qiaoyangla的博客
04-06 633
全局事件总线 1、一种组件间通信的方式，可以实现任意组件间通信 2、安装全局事件总线： new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) 3、使用事件总线： （1）接收数据：A组件想接收数据，则在A组价中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(d...
dax1-zyh#Steps-to-Master#Vue中全局事件总线（GlobalEventBus）的创建与使用方法1
07-25
全局事件总线一种组件间通信的方式，适用于任意组件间通信安装全局事件总线// 安装全局事件总线，$bus就是当前应用的vm使用全局事件总线接收数据A组件想要接收数
全局事件总线（GlobalEventBus）
qq_54598736的博客
10-11 958
全局事件总线（GlobalEventBus）
Vue 全局事件总线，实现任意组件间通信
乌药ice
09-12 906
1.在main.js中定义全局事件总线$bus Vue.prototype.$bus = this // 安装全局事件总线 $bus new Vue({ el:'#app', render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线 $bus } }) 2.使用事件总线 （A组件） methods:{ sendS
【Vue】全局事件总线
2301_76885465的博客
06-04 697
一种组件间通信的方式，适用于。
Vue - 全局事件总线
qq_33962481的博客
12-20 242
文章目录一、全局事件总线安装全局事件总线使用全局事件总线解绑全局事件总线 一、全局事件总线 可以实现任意组件间的通信 安装全局事件总线 使用全局事件总线 接收数据 组件向接收数据, 则在组件中给$bus绑定自定义事件, 事件的回调在组件自身 提供数据 this.$bus.$emit("xxxx", 数据) 解绑全局事件总线 最后可以在beforeDestroy钩子中, 用$off解绑当前组件所用到的事件 ...
vue全局事件总线(GlobalEventBus)
原地起飞
04-07 4012
1、一种组件间通信的方式，适用于任意组件间通信 2、安装全局事件总线： new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus 就是当前应用的vm }, ...... }) 3、使用事件总线： （1）接收数据：A组件想要接收数据，则在A组件中给 $bus 绑定自定义事件，事件的回调留在A组件自身。 methods(){ demo(data)
Vue中的全局事件总线
m0_58151273的博客
03-02 522
1.一种组件间的通信方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, .... }) 3.使用事件总线： 1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(data){.....} } ..... mounted(){ this.
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、付费专栏及课程。

余额充值