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

原创 已于 2023-05-14 12:39:19 修改 · 192 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#笔记

于 2023-05-14 12:32:44 首次发布
在Vue应用中，当需要在非父子组件间通信时，常使用全局事件总线$bus。首先在main.js中配置$bus的this指向VM实例，然后在发送文件（中1）中触发事件，最后在接收文件（右1）中监听并处理事件，实现兄弟组件间的交互。

 左1在main.js入口文件

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

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

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

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

第二步 发送

第三步 接收

逐渐暴躁
关注
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5545
【Vue 3】中全局事件总线 $bus 的使用
Vue中的全局事件总线：EventBus与$bus的比较详解与实战应用
码海扬帆：前端探索之旅的博客
05-14 1006
定义了 $bus 属性的 get 方法，当我们在组件中使用 this.$bus 访问时，实际上是在获取 EventBus 这个 Vue 实例。这个实例将作为我们的事件总线，用于在 Vue 组件之间进行事件通信。因此，虽然这两种方式都可以实现全局事件总线的功能，但在使用上有一些细微的差别。// 发送名为 'custom-event' 的事件，可以携带额外的数据。// 创建一个全局的事件总线并挂载到 Vue 原型上。// 监听名为 'custom-event' 的事件。// 监听名为'sendMsg'的事件。
vue $bus
qq_44439022的博客
03-04 1343
一、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 6972
$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 1455
$bus. $emit、 $bus. $on 用于非父子组件之间通信。
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间
最新发布
07-27 882
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间。虽然Vue推荐使用provide和inject或者Vuex进行组件通信，但在某些简单场景下，使用事件总线也是一种可行的解决方案。
vue2 全局事件总线（$bus）使用
glacierW的博客
12-29 1259
绑在bus上的都要主动销毁，因为App.vue销毁之后，bus还在，在上面注册的时间都还在占空间，所以需要进行销毁beforeDestroy和mounted同级。
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 6041
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
vue全局事件总线
qq_45848432的博客
11-16 723
vue组件间传值有很多种方法，这里我们来讲讲如何利用全局事件总线来进行组件间传值。先讲讲我们需要实现的一个案例，我们需要在兄弟组件中传值，将Student.vue中的学生信息传递给School.vue中进行使用，下面我们进行详细的操作。 一、注册全局事件总线 在一个创建好的vue2项目中注册全局事件总线(即在Vue的原型对象上添加一个对象$bus)，用于存放数据。我们都知道最大的组件是通过new Vue创建的实例对象，那么该组件能够通过隐式原型链访问到$bus。子组件是VueComponent的实例对象
Vue —— 全局事件总线（vc对象销毁前一定要把bus的事件解绑）
weixin_54966486的博客
03-11 1853
安装全局事件总线 main.js //创建vm new Vue({ el:'#app', render: h => h(App), //利用beforeCr钩子 beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线 } }) App.vue <script> methods:{ //勾选or取消勾选一个todo c..
Vue中全局事件总线$bus使用
欢愉码农的博客
11-24 1389
$bus全局事件总线使用广泛，可以实现多重身份组件之间的通信。且可传递参数，执行回调。
vue——全局事件总线$bus、消息订阅与发布pubsub
h_jQuery的博客
08-27 1176
全局事件总线（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 1576
vue中$bus全局事件总线理论+事件阐述
Vue-组件详解
weixin_34195364的博客
06-06 169
查看原文站点，更多扩展内容及更佳阅读体验！ 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component('my-component', {}); 要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-com...
Vue bus的使用（兄弟｜非父子组件传值）-->可以使用一个空的Vue实例作为中央事件总线new Vue()...
ahu2331的博客
07-19 323
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 1084
//入口文件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 1598
vue事件总线$bus解释与使用
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、付费专栏及课程。

余额充值