未加星标

Building a Simple EventBus in Vue.js

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Whenever an Vue.js application outgrows a certain simplicity, you isolate components to keep complexity under control. That makes them reusable, testable and maintainable. However, isolation makes it harder for components to communicate with each other. Where before there were parent and child components, the data flow is now interrupted. Another way has to be found for cross-component communication.

Event-based Communication

If passing props is not an option, the most commonly used way of exchanging information among components is to use Events. Vue.js already uses Events frequently, but mostly between components that are not isolated from each other.

All aboard the EventBus

An Event Bus allows communication between components without requiring the components to explicitly register with one another. They don’t even need to be aware of their existence. The Event Bus is the central instance for all Events, and every component can publish or subscribe to it. This way, all components can talk to each other no matter what their relationship to each other is.

There are many javascript implementations of a central Event Bus system. Libraries like Postal.js or AmplifyJS are worth investigating if you expect to build very complex systems. Luckily, for simple use cases, you don’t need to use an external library at all.

Events on the VueInstance

Vue.js already ships with everything you need to build your own Event Bus. Every Vue.js instance is able to emit and receive Events, since these functions are used to communicate between linked components. They also work for isolated components, with a very small change.

For the Event Bus, just use an empty Vue.js instance.

And that’s it. Every component can now use that Vue.js instance to send or listen to Events.

Both components use the globally available Event Bus to communicate. With actual components being used, it looks like this:

Event Bus with 4 components reacting to each other

Tips andTricks

In a larger Vue.js project, you would likely abstract the Event Bus into a single file, importing it into every component file where it needs to be used. This way, it does not pollute the global namespace.

The empty Event Bus instance does not need to stay empty. You can enrich the instance itself with logic to turn it into a service, maybe communicating with a real-time backend through websockets and passing new server-side events to the components via client-side events. Since your events are now handled at a central location, these things just got a lot easier.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava
分页:12
转载请注明
本文标题:Building a Simple EventBus in Vue.js
本站链接:http://www.codesec.net/view/532629.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(74)