vue全局事件总线$bus（尚品汇笔记002）

已于 2023-05-14 12:39:19 修改
阅读量178 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 笔记
于 2023-05-14 12:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxw621/article/details/130667503
在Vue应用中，当需要在非父子组件间通信时，常使用全局事件总线$bus。首先在main.js中配置$bus的this指向VM实例，然后在发送文件（中1）中触发事件，最后在接收文件（右1）中监听并处理事件，实现兄弟组件间的交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 左1在main.js入口文件

中1主动文件，需要触发事件文件，也就是发送的文件

右1是被动文件，被动的文件，也就是接收兄弟的文件

注意：中1和右1是兄弟关系，一般使用全局事件总线

第一步 通过vue全局配置$bus的this指向vm实例

第二步 发送

第三步 接收

逐渐暴躁
关注
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间
07-27 786
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间。虽然Vue推荐使用provide和inject或者Vuex进行组件通信，但在某些简单场景下，使用事件总线也是一种可行的解决方案。
尚品汇项目笔记
m0_67393039的博客
03-06 630
尚品汇项目笔记 前端Vue核心 1、vue文件目录分析 2、项目配置 3、组件页面样式 4、清除vue页面默认的样式 5、pages文件夹 6、footer组件显示与隐藏 7、路由传参 8、多次执行相同的push问题 9、定义全局组件 10、代码改变时实现页面自动刷新 11、Home首页其它组件 12、封装axios 13、前端通过代理解决跨域问题 14、请求接口统一封装 15、nprogress进度条插件 16、手动引入vuex 17、async await使用 18、vuex（*****） 19、lo
vue $bus
qq_44439022的博客
03-04 1312
一、bus的使用流程 1.bus就是vue的一个实例，可以理解为vue实例化后的一个组件 2.var bus = new Vue(); 3.把bus挂载Vue实例的原型对象上，也就是说用Vue实例化的每个组件都可以访问到这个$bus属性了。 4.Vue.prototype.$bus = bus; 5.之后就可以使用$bus进行监听和触发了。 6.his.$bus.$emit(event) 7.this.$bus.$on(event,fn) 二、为什么把Vue的实例挂载Vue原型上就可以通讯了呢？
vue中的$bus使用
w211312343的博客
07-05 6900
$bus是什么？ 关于$bus 我们把它叫做事件总线，它Vuex很像，但是它不是用来管理状态的，是管理事件总线的。主要是解决无关系组件之间的交互问题。 组件中使用 可以通过this.bus.bus.bus.emit(‘aaa’)发送事件函数 可以通过this.bus.bus.bus.on(‘aaa’)接受事件函数 在一个组件中发送 methods:{ foo(){ this.$bus.$emit('aaa') } } 另一个组件接受 created() { this.$bus.$on('aaa
vue中$bus.$emit和$bus.$on的用法温故
最新发布
ldcaws的专栏
06-05 1363
$bus. $emit、 $bus. $on 用于非父子组件之间通信。
vue2 全局事件总线（$bus）使用
glacierW的博客
12-29 1173
绑在bus上的都要主动销毁，因为App.vue销毁之后，bus还在，在上面注册的时间都还在占空间，所以需要进行销毁beforeDestroy和mounted同级。
笔记整理——Vue2项目尚品汇
Thaley的博客
01-01 2329
笔记整理——Vue2项目尚品汇
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6783
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
Vue商城项目笔记一
weixin_44215068的博客
05-01 1708
0.开发项目流程 1、书写静态页面 2、拆分组件 3、获取服务器的数据动态展示 4、完成相应的动态业务逻辑 1.创建项目 在对应目录下使用脚手架创建项目 vue create vue_shop 创建项目后，先了解对应的目录结构 node_modules：项目依赖文件夹 public：一般放置一些静态资源（图片等），放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中 src：源代码文件夹 ----assets：...
尚品汇项目听课总结
li520_fei的博客
04-01 1万+
文章目录第一天1)要求2)脚手架使用3)脚手架下载下来的项目稍微配置一下1:浏览器自动打开2关闭eslint校验工具3 src文件夹的别名的设置4）路由的配置1路由的一个分析2安装路由3创建路由组件【一般放在views|pages文件夹】4配置路由，配置完四个路由组件5)创建非路由组件6)路由的跳转7)底部组件的显示和隐藏8）路由传参第二天1)一个导航问题2)将Home组件的静态组件拆分3)测试接口4)axios二次封装5)完成三级联动6)函数防抖与节流面试题7)优化项目。8)路由的跳转与传参第三天1)搜索
vue——全局事件总线$bus、消息订阅与发布pubsub
h_jQuery的博客
08-27 1108
全局事件总线（GlocalEventBus） 1.一种组件间通信的方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ ... beforeCreate(){ Vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm }, ... }) 3.使用全局总线： ​ 3.1 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods:{ demo(msg){ console.log(msg
vue中$bus的使用和涉及到的问题
热门推荐
Liingot的博客
06-02 1万+
Hello大家周末好，最近项目比较忙所以没有及时的更新抱歉，今天给大家讲一vue.bus。使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到（每一个领域都是会有坑的呀）。 1：创建$bus文件 创建一个文件内容如下：import Vue from 'vue' export default new Vue(); 2...
vue中$bus全局事件总线
m0_62785037的博客
08-07 1538
vue中$bus全局事件总线理论+事件阐述
Vue-组件详解
weixin_34195364的博客
06-06 159
查看原文站点，更多扩展内容及更佳阅读体验！ 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component('my-component', {}); 要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-com...
Vue bus的使用（兄弟｜非父子组件传值）-->可以使用一个空的Vue实例作为中央事件总线new Vue()...
ahu2331的博客
07-19 311
1.在main.js中注册全局的bus Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用：this.bus.$emit('自定义事件名',data) methods:{ handleClicks(){ this.bus.$emit('openMenu',true) } } 父组建使用：...
Vue 事件总线 $bus的基本使用
m0_57547956的博客
02-23 1071
//入口文件main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //注册三级联动为全局组件 import TypeNav from '@/components/TypeNav' //执行mock import '@/mock/mockServe' //引入Swiper插件需要的CSS import 'swiper/cs.
vue中$bus的用法及$emit、$on、$off的使用
ldcaws的专栏
12-06 1万+
vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。 如两个组件之间传递数据： 子组件1 子组件2 1、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件 实例事件就是在构造器外部调用构造器内部的数据。4、实例 在Student组件中提供数据给另一个School组件 在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑
vue事件总线$bus解释与使用
weixin_52307122的博客
09-09 1541
vue事件总线$bus解释与使用
Vue全局事件总线$bus
叶鹤的博客
05-02 2171
Vue全局事件总线$bus 文章目录Vue全局事件总线$bus全局事件总线（GlobalEventBus）安装事件总线使用事件总线接收数据提供数据解绑事件最后给出一个例子代码 全局事件总线（GlobalEventBus） 是一种组件间通讯方式，适用于任意组件间通信 可以这样理解，举个小栗子，比如在兄弟组件中进行通讯，组件1要给组件2传递组件1的一个数据，这就可以有几种方法， 最简单想到的就是将组件1数据先传给App组件，再由App组件把数据传递给组件2，这样实现的兄弟间的通信会很麻烦， 那么就可以通过事件总
vue2全局事件总线$bus
08-29
Vue 2 中的全局事件总线 $bus 是一种用于在组件之间进行通信的机制。它基于 Vue 实例的事件系统，在任何地方都可以使用。 要使用 $bus，您需要创建一个新的 Vue 实例并将其作为全局事件总线。在创建这个实例后，您可以使用 $emit 方法触发一个事件，然后使用 $on 方法在其他组件中监听该事件。 下面是一个使用 $bus 的示例： ```javascript // main.js
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值