Vue任意组件间的通信——全局事件总线

最新推荐文章于 2024-06-04 11:48:39 发布
最新推荐文章于 2024-06-04 11:48:39 发布
阅读量868 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56396386/article/details/121320629
版权
本文介绍了如何利用Vue的全局事件总线实现组件之间的通信，包括安装全局总线、接收数据组件的回调方法、触发数据以及使用时的注意事项，如在生命周期钩子中操作事件总线。
摘要由CSDN通过智能技术生成

笔者说：今天学习的无意之间解决了之前困扰了很久的问题，这个老师的讲解真的是妙到家啊，看完之后都会不自主的哇一下。
让我想起了很久之前看到过的一句话：因为年少时见过太多惊艳的人，所以会一直追逐繁星。

Vue全局，组件与组件之间传值–全局事件总线

功能：任意组件间通信

安装全局总线

//在main.js文件中

//创建vm
new Vue({
   
    el:'#app',
    render:h => h(App)
最低0.47元/天 解锁文章
电烤牛上脑
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习笔记：任意组件间的通信方式--＞Vue全局事件总线
weixin_58257357的博客
03-22 654
目录 1 ----为什么要用全局事件总线 2 ----配置全局事件总线 3 ----绑定事件 4 ----触发事件 5 ----解除绑定 一 为什么要用全局事件总线？主要是为了方便子组件之间互相传递数据，如图： 从上图我们可以看到App有两个儿子组件A，C一个孙子组件B，要想把B的数据传递给App组件，在不使用总线和订阅的前提下只能通过A作为两者的传递媒介才能完成交互吧，而B和C两组件的数据传递就更麻烦了（兄弟组件间无法互相import，这里不再赘述了）。而如果使用事件总线就简..
Vue.js组件通信之自定义事件详解
10-16
主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（有代码示例）Vue 或 JavaScript中使用全局通信的3种方式
最新发布
Keep trying, keep going
06-04 488
这些库都可以实现全局事件通信，选择哪个库取决于你的需求和项目类型。在 Vue.js 项目中，EventBus 是一种简单的解决方案，而 Vuex 提供了更强大的状态管理功能。如果你需要一个独立于框架的轻量级事件总线库，mitt 是一个很好的选择。
vue全局组件通信
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
05-23 470
全局组件通信 📌 $bus main.js挂载: new Vue({ el:'#app', render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线 $bus } }) A—>B组件通信：例：B触发A组件中的事件 A: //监听getSome事件 mounted() { this.$bus.$on('getSome',(
Vue全局事件任意组件间通信
风水道人
10-29 500
Vue全局事件任意组件间通信
vue全局事件通信总线
weixin_42562086的博客
11-28 338
1、全局引入 // main.js import Vue from 'vue' Vue.prototype.$bus = new Vue() a 发布通信事件 // 注意：通信的两端所使用的事件名称必须一致，否则是无效的 this.$bus.$emit('bar', 145623) // b 注册通信的事件 this.$bus.$on('foo', (data) => { // // 处理函数 // }) 2、作为js模块引入： //bus.js import Vue from 'vue'
vue 全局事件总线详解 $bus-任意组件间通信
nilmao的博客
04-05 1216
全局事件总线（GlobalEventBus） 是一种组件间通信方式，适用于任意组件间通信 1.安装全局事件总线 main.js入口文件配置 new Vue({ beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线， //在开发中习惯取名为：$bus，可以自由命名 }, }).$mount('#app') 2.使用事件总线 以B组件给A组件传值为例；（B —> .
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
嘤嘤鸭的博客
11-28 546
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
【Vue.js】vue2组件间通信方式总结
weixin_43655896的博客
01-21 1343
目录 1. props传参 (1).父组件 ==> 子组件 (2).子组件 ==> 父组件 2.组件的自定义事件 3. 全局事件总线 4. 消息订阅和发布 5.vuex 1. 概念： 2.使用场景： 3.搭建vuex环境 4.vuex的具体使用 6. 插槽 一. 默认插槽： 二. 具名插槽： 三. 作用域插槽： 1. props传参 适用于父子组件之间传递参数 ​ (1).父组件 ==> 子组件 通信 ​ (2).子组件 ==&gt...
【Vue知识点】——Vue组件间通信的常用方式
m0_50785976的博客
07-20 260
Vue组件间通信的常用方式：props+自定义事件+全局事件总线
Vuex和全局事件总线的区别
love_dzq的博客
05-25 2077
我们知道通过全局事件总线的方法同样也能够实现任意组件间的通信，并且是依托于Vue的特性结合一些技巧实现的,并不需要第三方的支持，那么和全局事件总线相比Vuex和全局事件总线$bus的区别在哪里呢？我们下面来探讨一下
Vue组件间通信，全局事件总线（适用于任意组件间通信）
weixin_44475213的博客
08-04 279
在main.js中安装全局事件总线，调用$on,$emit,$off，来完成组件间通信与解绑事件
Vue组件间通信方式之全局事件总线
m0_50122836的博客
06-07 346
Vue组件间的通信方式
Vue全局事件总线-任意组件间通信
前端开发小白9527
03-16 683
基础概念：全局事件总线 假设有一个X 它不属于任何一个组件，假设组件A想要接收到组件B的数据，组件A 可以写一些代码通过给这个X绑定自定义事件，假设为testA，组件B就可以触发这一个自定义事件并且携带数据。 符合X要求： 1 所有的组件都可以触碰到这个X 2 X可以调用到$on $off $emit 绑定 解绑 触发... 1X放到什么地方可以让所有组件触碰的到？ 首先我们可以想到window,对象 ，但是放在window上会有缺陷。因为会一直跟随着整个应用 我们还可以想到Vue的原型对象
Vue全局总线
weixin_61687046的博客
07-15 239
全局事件总线，$bus,快递收发站
vue中实现任意组件间通信（全局事件总线、消息订阅与发布）
Jackmat的博客
05-29 289
我们可以在new Vue()时，在其beforeCreate生命周期里，加上Vue.prototype.$bus=this，此时的this指向的是Vue，由于Vue只有一个，并且都在各组件的原型链上。1.全局事件总线，顾名思义，可以适用于任意组件间通信，我们需要通过$bus这个中间傀儡来实现，我们可以把$bus安装到Vue身上，这样可以让所有组件都能看到它，：我们可以给需要接收数据的一方加上。：我们可以给需要提供数据的一方加上。
Vue的全局事件总线
ykh12345678的博客
05-16 245
安装全局事件总线，指定总线名为 $bus 绑定事件，并指定事件被调用时的回调函数 在其他组件中调用绑定的事件，并传递相应的参数，绑定事件的组件就可以接收到其他组件传来的数据。 为了保证事件名不冲突，最好在绑定事件的组件上，增加解绑的操作，就是当组件销毁的时候解绑该事件。 ...
Vue实例与兄弟组件间通信：借助事件总线实现数据传递
对于简单的父子组件通信，我们通常使用props来传递数据，而对于兄弟组件间的数据传递，可以使用自定义事件或者创建一个全局的事件总线（Vue Bus）来实现。本文将重点讲解通过Vue Bus实现兄弟组件传值的方法。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值