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方式
<!-- 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方法的调用，也就是精确控制页面的行为。
参考
当然我们也可以从Vue中创建一个Bus对象，然后绑定到一个Vue实例上，然后在组件中使用
this.$bus.on方法来注册事件。
个人收获和感想
通过以上知识点的梳理，我们知道了父子组件之间如何进行数据通信，以及不同组件之间如何共享数据，并通过合适的架构设计来保证业务中数据的共享和流动，同时为后续的升级迭代提供可扩展的支持和平滑升级，我相信除了这种方式外，也会有其它数据通信的方式，在前端领域不断更新变化的时代，我们只有深入底层理解原理，再加上一定经验的实践会给我们业务的发展提供充分有力的保障，更能打破信息壁垒，通过不同层次的学习方式来努力提升技术水平，构建更加稳定安全的产品或者服务，我相信产品的最大价值就是为用户不断创造价值，对此我深信不疑，更希望大家保持学习的热情，完善自己的知识技术体系，打造属于我们自己的平台或者产品。若是我的文章对你有所启发，那将是我莫大的荣幸。
