学习笔记：任意组件间的通信方式--＞Vue全局事件总线

已于 2022-03-22 20:09:30 修改
阅读量687 收藏 2
点赞数
文章标签： javascript vscode
于 2022-03-22 20:07:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58257357/article/details/123668423
版权
本文介绍了在Vue中使用全局事件总线解决组件间通信的问题，详细讲解了配置、绑定、触发和解绑事件的步骤，旨在帮助开发者更好地理解和应用这一通信方式。
摘要由CSDN通过智能技术生成

目录

1 ----为什么要用全局事件总线

2 ----配置全局事件总线

3 ----绑定事件

4 ----触发事件

5 ----解除绑定

​

一 为什么要用全局事件总线？主要是为了方便子组件之间互相传递数据，如图：

​

从上图我们可以看到App有两个儿子组件A，C一个孙子组件B，要想把B的数据传递给App组件，在不使用总线和订阅的前提下只能通过A作为两者的传递媒介才能完成交互吧，而B和C两组件的数据传递就更麻烦了（兄弟组件间无法互相import，这里不再赘述了）。而如果使用事件

最低0.47元/天 解锁文章
vue任意组件间的通讯方式
weixin_46660029的博客
08-03 136
vue任意组件之间的通信方式
Vue3学习笔记-- 组件化 - 插槽Slot(重点)/非父子通信
专注于 前端开发 知识分享
10-01 914
插槽的使用过程其实是 抽取共性 预留不同;我们会将 共同的元素 内容依然在组件内 进行封装同时会将 不同的元素使用slot作为占位,让外部来决定到底显示什么样的元素;
Vue组件通信:任意组件之间进行通信
czjl6886的博客
12-28 2595
任意组件之间的通信方法，主要有全局事件总线、消息订阅与发布、vuex和缓存，vuex和缓存在实际开发中不经常使用，因此就只讲前面2种方式。
任意组件间通信的两种方法
weixin_46376652的博客
07-15 317
全局事件总线、消息的订阅与发布、$nextTick
Vue任意组件间通信方式--两种方法
weixin_43912081的博客
09-17 336
Vue中除了父子间通信，还有需要在兄弟之间通信或者祖孙之间通信的情况 而这两种情况下需要有更方便的通信方式，有以下两种：全局事件总线和 一、全局事件总线（GlobalEventBus） 1.一种组件间通信的方式，适用于任意组件间通信。 2.安装全局事件总线： new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm }, ...... }) 3.使用事件总
vue组件通信之任意级组件之间的通信
weixin_34067049的博客
06-02 96
<div id="app"> <comp1></comp1> <comp2></comp2> </div> Vue.component('comp1', { template: ` <div> <p>我是第一个组件...
vue基础学习笔记 --- 组件间数据的传输方式（7种，vue2环境下）
MImi_0612的博客
08-07 1282
vue组件间传值的7中方法：props、自定义事件、$bus、pubsub-js、vuex、插槽slot、provide和inject跨组件传值
【学习笔记-Vue】基础篇-07-组件
AlanLee97的博客
11-13 192
【学习笔记-Vue】基础篇-07-组件 目录 1. 组件与复用 2. 使用props传递数据 3. 组件通信 4.使用slot分发内容 5. 组件高级用法 6. 其他 7. 实战：两个常用的组件开发 1. 组件与复用 1.1 组件的用法 组件需要注册后才能使用，注册分全局注册和局部注册。 全局注册 <div id="app"> <my-component>&l...
vue学习笔记三：非父子组件通信
qq_43693520的博客
08-06 402
前言 在之前，我们学习了父子组件间的通信传值，接下来就看下非父子组件之间是怎样通信。 通过单独的事件中心管理组件间的通信 方式一：定义一个空的 Vue 实例作为事件总线 步骤一：定义一个空的 Vue 实例作为事件总线。 var eventHub = new Vue() 我们把这个空的 Vue 实例当作我们组件间通信的中转站，然后在组件中，使用 $emit, $on, $off 分别来分发、监听、...
VUE----组件通信（全局事件总线）
王延朕的博客
03-29 234
全局事件总线 （GlobalEventBus） 1.一种组件间通信的方式,适用于任意组件间通信 2.安装全局事件总线 new Vue({ beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm } }) 3.使用事件总线: 1.接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身 methods(){ demo(
VUE--组件间通信--全局事件总线
qq_43470725的博客
06-04 214
vue全局事件总线
vue组件通信---全局事件总线（任意组件间通信）
zyy_wx的博客
09-25 555
vue组件通信---全局事件总线（任意组件间通信）
【Vue】组件通信（任意通信）
weixin_39415598的博客
01-28 258
微信订阅号：Rabbit_svip 本节所需的基础知识： 【Vue】组件通信（父传子props） 【Vue】组件通信（子传父$emit） 任意组件相互通信或者说兄弟（平级）组件相互通信有2个解决方案。 【方案 1】通过父组件进行通信 （不推荐） 思路如下图所示 微信订阅号：Rabbit_svip 这种方法不推荐使用 因为如果组...
Vue组件间通信方式之全局事件总线
m0_50122836的博客
06-07 375
Vue组件间的通信方式
Vue组件之间的通信方式，事件总线
SWABS23的博客
01-02 191
事件总线，数据的传递 组件之间的数据传递，除了父子组件通信，还有事件总线，主要针对非父子组件的传递 先在main.js文件将$bus加入到Vue实例 //将事件挂载到vue实例中 Vue.prototype.$bus=new Vue() ...
vue的全局事件总线
小认真靖哥哥的博客
11-06 352
vue的全局事件总线
vue全局组件通信
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
05-23 496
全局组件通信 📌 $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',(
组件之间的相互通信
john987321456的博客
12-03 947
组件之间的相互关系 一、组件传值 （一）父组件=》子组件 1、通过props传值 2、通过refs传值 3、通过children传值（注意：children对象不保证顺序和响应式） 案例展示 --------父组件 <template> <div class="home" > <img alt="Vue logo" src="../assets/logo.png"> <!-- ****通过props传值**** -->
Vue中的全局事件总线
m0_58151273的博客
03-02 544
1.一种组件间的通信方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, .... }) 3.使用事件总线： 1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(data){.....} } ..... mounted(){ this.
构建Figma插件的Vue组件库：figma-plugin-ds-vue
至于文件名“figma-plugin-ds-vue-master”，这通常意味着这是组件库的主干代码仓库，可能包含源代码、文档和可能的示例代码。开发者可以从这个文件名推测，这个压缩包包含了构建Figma插件所需的所有Vue组件资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值