越写悦快乐之Vue项目如何集成EventBus

Vue Bus - 图片来自我的手机

今天的越写悦快乐之系列文章为大家带来Vue项目如何集成EventBus。有过Vue开发经验的小伙们都知道，多个组件之间进行数据的传递或者共享在Vue项目中很是常见，我们如何在不引入Vuex的情况下该如何共享数据呢？今天的文章我为大家带来这篇文章，希望大家喜欢。

Event是什么

Event是HTML中DOM对象中事件的状态，它可以触发页面元素的行为，比如鼠标 / 键盘属性、事件句柄、以及多个浏览器支持的标准Event事件。
在Vue中表示一个Vue实例的方法，比如$on、$off、$emit等

开发环境

Window 10.0.17763
Node 10.15.3
Yarn 1.16.0
Vue 2.6.10

接入步骤

添加依赖

CDN方式

NPM方式

npm install vue-bus --save

YARN方式

yarn add vue-bus -S

引入

我们在项目的入口文件src/main.js中使用Vue.use()来挂载到Vue对象上，可参考如下写法：

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

使用

最后我们在组件文件Event.vue中提供的方法（组件生命周期）中声明和监听Bus，下面给出一个完整的Vue组件的定义：

那我们在组件创建和销毁的过程中检测到addTodo方法的调用，也就是精确控制页面的行为。

参考

Bus
Event

当然我们也可以从Vue中创建一个Bus对象，然后绑定到一个Vue实例上，然后在组件中使用this.$bus.on方法来注册事件。

个人收获和感想

通过以上知识点的梳理，我们知道了父子组件之间如何进行数据通信，以及不同组件之间如何共享数据，并通过合适的架构设计来保证业务中数据的共享和流动，同时为后续的升级迭代提供可扩展的支持和平滑升级，我相信除了这种方式外，也会有其它数据通信的方式，在前端领域不断更新变化的时代，我们只有深入底层理解原理，再加上一定经验的实践会给我们业务的发展提供充分有力的保障，更能打破信息壁垒，通过不同层次的学习方式来努力提升技术水平，构建更加稳定安全的产品或者服务，我相信产品的最大价值就是为用户不断创造价值，对此我深信不疑，更希望大家保持学习的热情，完善自己的知识技术体系，打造属于我们自己的平台或者产品。若是我的文章对你有所启发，那将是我莫大的荣幸。