vue2全局引入 $bus

Vue.js中使用$bus进行全局事件通信,
最新推荐文章于 2024-02-01 11:04:43 发布
原创 最新推荐文章于 2024-02-01 11:04:43 发布 · 283 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #前端框架

在Vue应用中，通过创建一个新的Vue实例并赋值给Vue.prototype.$bus，实现了全局事件总线。发送数据时，利用$bus.$emit触发事件；接收数据时，使用$bus.$on监听事件，这样可以在组件间进行非父子关系的数据通信。

main.js全局引入

const bus = new Vue()
Vue.prototype.$bus = bus

 发送数据

 接收数据

 

枳睐
关注
Vue 全局引入bus实现兄弟组件通信
crazyZhangxl的博客
04-20 2332
简述 本文是一篇记录vue使用技巧的简短文章，该文记录的是vue中兄弟组件间通信的方式，之前经历了第一个vue app项目，也是想积淀一下，之前是在项目中是在需要的vue中对bus进行引入，对于这类常见的工具最好提倡是全局引入进行一定的封装。 局部使用案例 bus.js import Vue from 'vue' export const Bus = new Vue(); 接收总线通知 imp...
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5542
【Vue 3】中全局事件总线 $bus 的使用
vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
大灰狼的小绵羊哥哥的博客
09-24 908
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。 http://www.tuicool.com/articles/7VvAnqF 首
vue2全局事件总线如何使用（$bus）
weixin_67002441的博客
06-05 1123
Vue.prototype.$bus = this //安装全局事件总线，bus就是当前应用的vm。1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。2.提供数据: this.$bus.$emit('xxxx',数据)1.一种组件间通信的方式，适用于任意组件间通信。
【Vue2】全局事件总线$bus
weixin_45707229的博客
09-12 2400
全局事件总线：在main.js中对vue的原型注册好$bus，在父组件中通过this.$bus.$on来注册全局事件，在子组件中通过this.$bus.$emit来调用注册好的事件。
vue2中使用 $bus
stpzhf的博客
11-03 1035
每次使用这个技术总是忘记 每次都得百度 决定写道自己的博客里面。
浅谈vue中$bus的使用和涉及到的问题
10-15
// 从指定路径引入bus实例 Vue.prototype.$bus = Bus; new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }); ``` 在`bus/bus.js`文件中，我们创建了一个Vue实例： ```...
Vue2和Vue3组件间通信方式汇总（3）------$bus
qq_50276105的博客
12-23 1304
组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 6033
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
vue3和vue2中bus的使用
kanno的博客
08-04 2450
vue3和vue2中bus的使用 说明：为了解决组件间的通信，也就是组件与组件间的数据传递(它们之间毫无关系)；这里以组件1传递数据到组件2为例。1.首先新建一个Bus.js文件。
前端vue2中全局事件EventBus的使用方法
m0_49714202的博客
11-19 1818
前端vue2中全局事件EventBus的使用方法
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 616
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
Vue全局Bus
杨凌超的博客
01-25 2487
Vue组件嵌套太深，要实现组件之间的通信，又因项目太小不想用Vuex怎么办，来一起写一个Vue全局Bus吧。 众所周知，一个中央事件总线bus，我们可以用来解决兄弟组件和嵌套很多层的组件之间的通信问题，一个页面 一个页面的引入又太麻烦，直接写一个Vue插件全局引入。 const install = (Vue) =&gt; { const Bus = new Vue({ methods: { ...
Vue全局事件总线$bus
叶鹤的博客
05-02 2250
Vue全局事件总线$bus 文章目录Vue全局事件总线$bus全局事件总线（GlobalEventBus）安装事件总线使用事件总线接收数据提供数据解绑事件最后给出一个例子代码 全局事件总线（GlobalEventBus） 是一种组件间通讯方式，适用于任意组件间通信 可以这样理解，举个小栗子，比如在兄弟组件中进行通讯，组件1要给组件2传递组件1的一个数据，这就可以有几种方法， 最简单想到的就是将组件1数据先传给App组件，再由App组件把数据传递给组件2，这样实现的兄弟间的通信会很麻烦， 那么就可以通过事件总
vue兄弟传值---使用bus进行组件通信
Daydreame_r的博客
04-06 605
vue兄弟传值---使用bus进行组件通信，如果不移除这个方法，那就会出现多个bus触发，每次这个方法都会停留在vue的生命周期中。==created中创建：==可以在页面还没加载时先拿到数据。
vue2 全局事件总线（$bus）使用
glacierW的博客
12-29 1256
绑在bus上的都要主动销毁，因为App.vue销毁之后，bus还在，在上面注册的时间都还在占空间，所以需要进行销毁beforeDestroy和mounted同级。
vue2 组件、父子组件、bus中央事件总线
努力努力再努力
12-23 1062
局部组件，只能父组件调用// 名称如果为驼峰则标签转为‘-’ ps：myCo -> 全局组件,全局可调用
vue2中使用事件总线（EventBus）传值
qq_43575827的博客
07-20 851
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
【vue2】全局事件总线$bus
阿程的博客
02-01 1099
全局事件总线$bus
$bus用法
最新发布
10-15
在 Vue 项目中，需要先引入 $bus，通常是在全局引入： ```javascript Vue.prototype.$bus = Vue.prototype.$bus || new Vue(); ``` 这样在所有的 Vue 组件中都可以通过 `this.$bus` 来访问它 [^3]。 ### 定义监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值