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

今天的越写悦快乐之系列文章为大家带来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方式

<!-- development version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.js"></script>
<!-- production version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>

• 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组件的定义：

<template>
  <div>
    <van-nav-bar 
      :title="pageTitle" 
      fixed/>
  </div>
</template>

<script>
import { NavBar, Toast } from 'vant'
export default {
  name: 'Event',
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      // 页面标题
      pageTitle: '我',
    }
  },
  created() {
    this.$bus.on('add-todo', this.addTodo);
  },
  beforeDestroy() {
    this.$bus.off('add-todo', this.addTodo);
  },
  methods: {
    addTodo() {
      this.$bus.emit('add-todo', { text: this.newTodoText });
      this.newTodoText = '';
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell-group {
  margin-top: 48px;
}
</style>

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

参考

• Bus
• Event

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

个人收获和感想

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