Vue通过eventBut实现组件全局通信
一、组件之间的层级关系如下图:
现要在test_page_1.vue 组件中改变,MyHeader.vue组件中的某个属性值。
二、eventBus简介:
EventBus
又称为事件总线。在Vue中可以使用 EventBus
来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。
EventBus
可以较好的实现兄弟组件之间的数据通讯。
三、使用eventBus解决问题
1、初始化
创建eventbus.js文件
import Vue from 'vue'// 解决多组件传值问题
export const globalBus = new Vue();
2、在test_page_1.vue 组件中添加发送事件
<script>
import { globalBus } from '../../eventBus';
export default {name: 'TestPage1',data(){return {input: ''}},methods: {change(){globalBus.$emit("change-welcome",this.input);console.log(this.input);}}
}
</script>
3、在MyHeader.vue中添加接收事件
<script>
import { globalBus } from '../eventBus';export default {name: 'MyHeader',data() {}},methods : {...},mounted: function(){globalBus.$on("change-welcome",welcomeMsg =>{this.welcomeMsg = welcomeMsg;});}
}
</script>
四、eventBus可能会导致的问题
前面提到过,如果使用不善,EventBus
会是一种灾难,到底是什么样的“灾难”
了?大家都知道vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus
会被移除,这样就导致业务走不下去。还要就是如果业务有反复操作的页面,EventBus
在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus
在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus
事件监听。
移除eventBus事件监听
import { eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
你也可以使用 EventBus.$off('aMsg')
来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off()
来移除所有事件频道,不需要添加任何参数 。
上面就是 EventBus
的使用方法,是不是很简单。上面的示例中我们也看到了,每次使用 EventBus
时都需要在各组件中引入 event-bus.js
。事实上,我们还可以通过别的方式,让事情变得简单一些。那就是创建一个全局的 EventBus
。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus
。
五、介绍全局eventbus的使用
它的工作原理是发布/订阅方法,通常称为 Pub/Sub
。
1、创建全局eventbus
var EventBus = new Vue();Object.defineProperties(Vue.prototype, {$bus: {get: function () {return EventBus}}
})
可以直接在项目中的 main.js
初始化 EventBus
:
// main.js
Vue.prototype.$EventBus = new Vue()
在这个特定的总线中使用两个方法$on
和$emit
。一个用于创建发出的事件,它就是$emit
;另一个用于订阅$on
:
var EventBus = new Vue();this.$bus.$emit('nameOfEvent', { ... pass some event data ...});this.$bus.$on('nameOfEvent',($event) => {// ...
})
然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", '我是web秀');
,另一个Vue页面使用
this.$bus.$on('updateMessage', function(value) {console.log(value);
})
同时也可以使用this.$bus.$off('sendMsg')
来移除事件监听。
Vue通过eventBut实现组件全局通信相关推荐
- Vue全家桶之组件间的通信(四)
Vue全家桶之组件间的通信(四) 概述 组件是Vue中最强大的功能,组件实例之间的数据无法直接相互引用,所以需要掌握组件间通信的方式和技巧. 组件实例之间的关系可以分为父子关系.兄弟关系和隔代关系.针 ...
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
- Vue(组件间通信:props、自定义事件、全局事件总线、消息订阅与发布)
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息 子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
- vue组件通信---全局事件总线(任意组件间通信)
描述: 全局事件总线是组件间通信的一种方式,适用于任意组件间通信 1.安装全局事件总线: 在main.js入口文件中完成全局事件总线的安装配置 new Vue({el:'#app',render: h ...
- 【Vue组件间通信】 全局事件总线、订阅与发布
目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事 ...
- Vue的全局事件总线实现任意组件间通信
全局事件总线原理:利用自定义事件实现 在main.js中安装全局事件总线 import Vue from 'vue'; import App from 'App.vue'; new Vue({rend ...
- 深入解析Vue组件间通信
React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通信,兄弟间通 ...
- vue Bus 总线 组件间通信
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
最新文章
- 重构碎片化知识_知识碎片化时代,如何妙用思维导图,提高你的学习效率(含福利)...
- python第三周测试_python第三周小测
- C语言指针怎么存二维数组,C语言怎么用指针代替二维数组
- 《SpringBoot揭秘:快速构建微服务体系》—第1章1.2节微服务因何而生
- 从VBA到VSTO的一些想法
- FAT32文件系统介绍
- Ubuntu 20.04 Please reinstall Android Studio from scratch
- 如何让计算机从固态硬盘启动不了,电脑设置固态硬盘启动的方法
- 在v$lock里找Holder和Waiter
- UUID订单单号生成器
- IP地址及相关计算方法知识
- 迎着冷眼和嘲笑?前进
- OTDR光时域反射仪 知识总结
- java批量去除pdf签名,删除签名图标
- MQ之ActiveMQ
- GBase 8s savepoint
- 原系统删除11g Rac后安装10g Rac中的问题处理
- 信号发生器电路的FPGA设计
- 骨传导是表示啥、骨传导蓝牙立体声耳机
- dojo 开发资源_使用Dojo掌握面向对象的开发
热门文章
- 十分钟了解分布式计算:GraphLab
- 鸟哥的Linux私房菜(服务器)- 架站文件習題解答篇
- 程序员面试题精选100题(24)-栈的push、pop序列[数据结构]
- boost源码剖析之:泛型编程精灵type_traits(rev#2)
- 大话设计模式(八 用“策略模式”是一种好策略)
- 006-spring-data-elasticsearch 3.0.0.0使用【四】-spring-data之Elasticsearch Repositories
- 大数据销售管理服务提供商InsideSales获得1亿美元融资
- crontab命令的使用
- iOS crash 崩溃问题的追踪方法
- VLC-OFDM系统中一种改进的可变噪声比特功率分配算法