vue - 组件间通信 之 中央事件总线bus

简介: 中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容;var bus = new Vue();人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站点的B输送到a站点;这里a,b站点就像父、子组件,也像兄、弟组件,或者像两个没有任何亲戚关系的任何组件;而A,B就像是各个组件内部要传输的数据或者要执行的命令信息,靠bus来通信。

中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容;

var bus = new Vue();

人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站点的B输送到a站点;

这里a,b站点就像父、子组件,也像兄、弟组件,或者像两个没有任何亲戚关系的任何组件;

而A,B就像是各个组件内部要传输的数据或者要执行的命令信息,靠bus来通信。

 

如果有父子组件通信知识基础的,应该记得当初父子组件通信,父组件中用$on监听,子组件中用$emit发射。

现如今父子组件(或任何其他关系的两个组件之间)达成一致协议:

将监听和发射的工作交给了bus来搞,就好像他们两头不自驾接送了,改乘公交了自己出发自己回家了。

那局面就是下边这样

$on和$emit现在绑在bus上了

bus.$emit(‘同名自定义事件名’,‘$on发送过来的数据’);

在a站点(第一个组件)中的methods方法里,准备用bus的$emit发射事件任务。

1 bus.$on(‘自定义事件名’,function(){
2     //然后执行什么你自己懂的。。。
3 });

在b站点(另一个组件)实例初始化(mounted钩子中)时,用bus的$on监听自家$emit触发的事件。

 

 

Bus实例扩展:

可以再添加data、methods、computed等选项,在初始化时让bus获取一下,任何组件都可以公用了。就像公交车上的座位,只要有座谁都能坐。

可以包括一些共享通用的信息:比如用户登录的姓名、性别、邮箱等,还有油壶授权的token等。(梁灏《vueJs实战》)

 

目录
相关文章
|
7天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
19天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
22天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
24 1
|
23天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
32 2
|
23天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
25 1
|
1月前
|
JavaScript 调度
Vue事件总线(EventBus)使用指南:详细解析与实战应用
Vue事件总线(EventBus)使用指南:详细解析与实战应用
57 1
|
3月前
|
JavaScript
Vue学习之--------全局事件总线(2022/8/22)
这篇文章介绍了Vue中全局事件总线(GlobalEventBus)的概念和使用方法,它允许不同组件之间进行通信。文章通过图解和代码实例详细解释了如何安装全局事件总线、在组件中接收和提供数据,以及如何在组件销毁前解绑事件,以避免潜在的内存泄漏问题。
Vue学习之--------全局事件总线(2022/8/22)
|
6月前
|
JavaScript
解释 Vue 的事件总线和 emits 属性。
解释 Vue 的事件总线和 emits 属性。
76 3
|
6月前
|
JavaScript
在Vue中,如何使用事件总线来传递数据和触发事件?
在Vue中,如何使用事件总线来传递数据和触发事件?
96 0