vue bus触发$emit 监听$on 关闭$off传值

最新推荐文章于 2025-10-06 05:52:17 发布
原创 最新推荐文章于 2025-10-06 05:52:17 发布 · 5.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用Vue实例作为事件总线实现组件间通信的方法。通过在main.js中引入并暴露bus实例，允许不同组件注册监听事件和发射事件，从而实现跨组件的数据传输。文章详细展示了如何在a.vue和b.vue组件中利用Bus实例进行事件监听和事件触发，完成数据的传递。 
// bus.js文件
import Vue from 'vue';
export default new Vue;

// main.js文件
**** // 原有的数据
**** // 原有的数据
import bus from '@/bus.js';
Vue.prototype.Bus = bus;

//a.vue 
...
 beforeCreate(){
    Bus.$on("this_change",[1,2])
 }
....
//b.vue
...
created(){
    Bus.$emit("this_change",(em) => {
        //这样就可以打印出来刚刚传过来的1和2了
        console.log(em[1],em[2]); 
    });
}，
beforeDestroy(){
    //最后不要忘了删除传输事件
    Bus.$off("this_change")
qq8344310
关注
Vue组件通信：Bus使用方法
CsCufft的博客
10-04 264
在上面的示例中，当ComponentA中的按钮被点击时，它会通过Bus实例触发一个名为"message"的事件，并传递消息"Hello from ComponentA"。在Vue.js中，组件是构建应用程序的基本单元，并且组件之间的通信是非常重要的。因此，在使用Bus时，要谨慎设计组件之间的通信逻辑，避免出现混乱的代码结构和不必要的依赖关系。然后，在需要进行组件通信的组件中，你可以使用Bus实例来触发和监听事件。通过使用Bus实例，我们可以在不同的组件之间进行灵活的通信。如有疑问，请随时提问。
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 9743
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
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 事件总线（EventBus）详解
最新发布
csdn_silent的博客
10-06 1418
事件总线是一个发布-订阅模式的实现，它允许组件之间通过事件进行通信，而不需要直接引用对方。
页面被销毁后，接口仍然被调用；Bus.$off
qq_45327886的博客
03-15 1082
页面被销毁后，接口仍然被调用;Bus.$off
vue Bus总线
weixin_34238642的博客
09-05 265
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 参考：http://blog.youkuaiyun.com/u013034014/article/details/54574989?locationNum=2&fps=1 例子：https://segmentfault.com/q/1010000007491994...
vue-bus
KUAILEZHENWO的专栏
12-27 458
Vue-Bus是一个专为Vue.js设计的事件总线插件，它允许在不同的Vue组件之间轻松地发送和接收事件，从而实现组件间的通信。
解决vue bus.$emit触发第一次$on监听不到问题
10-15
总结来说，解决Vue bus.$emit触发第一次$on监听不到问题需要注意以下几点： 1. 使用$nextTick确保数据传递在子组件创建之后发生。 2. 在路由跳转前移除事件监听，避免重复监听。 3. 在使用$on之前，先用$off注销可能...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 4万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
Vue bus
Koini
07-09 524
bus主要实现组件之间的通信，较于组件之间的子传父，父再传另一子组件方便了很多 首先创建一个bus.js import Vue from 'vue' const bus = new Vue() export default bus 父页面 <template> <div class="demo-wrapper"> <comA /> <comB /> </div> </template> <script&
vue bus
qq_43427657的博客
08-31 188
vue bus使用 新建bus.js import Vue from 'vue' const bus = new Vue() export default bus 在需要用到的组件引入 import bus from "../bus" 在A组件使用传参： e：需要传的参数 bus.$emit('handClick',e) 在B组件使用： e:接收传过来的参数 mounted () { bus.$on('handClick', e=>{ console.log(e)
同一页面组件多次引用，Bus.$on & $off
粘锅土豆的博客
07-21 639
同一页面组件多次引用，Bus.$onduo
探索 Vue 中的 bus.$emit：实现组件通信的强大工具
你若盛开，清风自来
11-25 3199
在 Vue 中，父子组件之间可以通过 props 和 events 进行通信。 然而，当需要在多个不相关的组件之间进行通信时，使用bus.$emit可以提供一种更灵活的方式。
vue bus 使用
weixin_41481695的博客
03-05 192
简单记录一下vue bus 实现组件之间传值
vue Bus的使用
qq_37899792的博客
03-19 4889
场景：有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 组件调用时先引入 组件1 import Bus from './Bus' expor...
vue bus的使用
记事本
12-09 284
使用Bus.js进行兄弟(非父子)组件通信 1.首先写bus.js文件 任意地方添加一个bus.js，在bus.js里面 写入下面信息 import Vue from 'vue'; const bus = new Vue(); export default bus; 2.在需要通信的组件都引入bus.js from后面就改成你的所放bus.js文件的位置 import Bus from './bus.js' 3.需要发送事件的组件使用 bus.$emit 发送事件 this.$bus.$emit('te
vue中bus的使用
我们一起学前端
07-25 3669
一、新建bus.js import Vue from 'vue' export const bus = new Vue() 二、引用bus.js，发送消息 import {bus} from './bus' bus.$emit('test', 11) 三、引入bus.js,接受消息 import {bus} from './bus' bus.$on('test', function (msg)...
vue 使用 eventBus
A secret makes a woman woman.
07-18 534
文件 vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ...
bus.$emit在vue怎么触发另一个页面的事件
06-02
在 Vue 中，可以使用 `Vue.prototype.$bus` 创建一个全局事件总线，实现不同组件或页面之间的通信。具体实现步骤如下： 1. 在 `main.js` 中创建全局事件总线： ```javascript import Vue from 'vue' Vue.prototype.$bus = new Vue() ``` 2. 在发送事件的页面或组件中，使用 `$bus.$emit` 触发事件： ```javascript this.$bus.$emit('event-name', data) ``` 其中，`event-name` 是要触发的事件名称，`data` 是要传递的数据。 3. 在接收事件的页面或组件中，使用 `$bus.$on` 监听事件： ```javascript this.$bus.$on('event-name', function(data) { // 处理接收到的事件和数据 }) ``` 其中，`event-name` 是要监听的事件名称，`data` 是接收到的数据。注意，在组件销毁时，需要使用 `$bus.$off` 取消事件监听，避免内存泄漏： ```javascript beforeDestroy() { this.$bus.$off('event-name') } ``` 这样，在一个页面或组件中使用 `$bus.$emit` 触发事件后，在另一个页面或组件中就可以使用 `$bus.$on` 监听到该事件，并处理接收到的数据。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值