共计 2484 个字符，预计需要花费 7 分钟才能阅读完成。
月亮啊月亮
你能照见南边，也能照见北边
照见她，你跟她说一声，就说我想她了。
前言
前一篇文章写了 vue 中利用 Props 实现组件之间的通信，那种形式是最简略也是最根底的组件之间的通信形式。父组件通过 props 向下传数据给子组件，当子组件有事件通知父组件时会通过 $emit 事件通知父组件。对于父子组件，这种传递形式，是较为不便且实用的，然而对于祖孙组件或者兄弟组件，就显得不那么友善了。
在 Vue 自身的生态中，也有一个独立的 Vuex 库用来解决组件之间的通信，但很多时候，咱们并不需要动用相似 Vuex 这种大杀招，而能够思考更简略的 Vue 中的事件总线，即EventBus。
在这提出一个简略的思考:
一旦当你看到我的项目中, 某段代码或者是要点很多下能力进去的变量, 再或者获取到的形式都雷同, 这个时候你就肯定要思考能不能让代码达到复用, 咱们要学会偷懒哈, 偷懒能力后退的更快哈.
上面开始明天的注释哈 …
一、什么叫全局事件总线
1.1、概念的引入
咱们先认清一件事件，所谓的组件之间的交互，就是咱们将数据可能做到组件之间可能共享数据。
无论是 props、EventBus、Vuex、公布订阅 等实现组件交互，实质就是做到数据共享。弄清这一点，对于应用全局事件总线，就简略多了哈。不过明天的文章，次要是先带着大家应用，原理等周末拉。
EventBus 又称为事件总线。在 Vue 中能够应用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用雷同的事件核心，能够向该核心注册发送事件或接管事件，所以组件都能够高低平行地告诉其余组件，但也就是太不便所以若应用不慎，就会造成难以保护的劫难，因而才须要更欠缺的 Vuex 作为状态管理中心，将告诉的概念回升到共享状态档次。
1.2、装置全局事件总线
// 想要成为事件总线的条件：//1、所有的组件对象必须都能看失去这个总线对象，因而咱们把这个对象放在了 Vue 原型
//2、这个事件总线对象必须能调用 $on 和 $emit 办法（总线对象必须是 Vue 的实例化对象或者是组件对象）确定全局事件总线: 将 vm 对象作为事件总线挂载到 vue 的原型对象上
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 对于全局总线的应用阐明
// 应用全局总线的时候，更好的利用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到间接通信，这个应用全局事件总线会不便很多
new Vue({render: h => h(App),
// beforeCreate 位于数据挂载之前的生命周期函数
beforeCreate () {
// 装置全局事件总线
Vue.prototype.$bus = this
}
}).$mount('#app')
1.3、根本应用
小案例：
在 App 组件内引入一个 demo 组件，demo 组件中有一个按钮，点击能够批改 app 组件传给子组件的值，并更新视图。
App 组件
<template>
<div class="todo-container">
// 数据的传递，还是用 props 快哈
<Demo :msg="msg"></Demo>
</div>
</template>
<script>
import Demo from './components/Demo'
export default {
components: {Demo},
data () {
return {msg: 'hello, 你好'}
},
methods: {updateMsg () {this.msg = 'hello, 你好丫，我是博主宁在春'},
updateMsg2 (value) {this.msg = value}
},
// 在加载实现后就进行全局总线的绑定
mounted () {
// 绑定办法，'updateMsg' 是全局事件总线办法名，而前面是回调时须要执行的办法
this.$bus.$on('updateMsg', this.updateMsg)
this.$bus.$on('updateMsg2', this.updateMsg2)
},
// 养成习惯 在组件销毁的时候，将事件进行解绑
beforeDestroy () {
// 就是解绑事件，有多种形式，参数为空，间接是让所有办法解绑
// 多个的时候，能够间接放一个数组进去。// this.$bus.$off(['updateMsg',....])
this.$bus.$off('updateMsg')
this.$bus.$off('updateMsg2')
// 原理就让我留到下次吧，兄弟们
}
}
</script>demo 组件
<template>
<div>
<h1>{{msg}}</h1>
<button @click="updateMessage()"> 点击批改 </button>
<button @click="updateMessage2(' 你好丫，宁在春 ')"> 点击批改 </button>
</div>
</template>
<script>
export default {
props: {msg: String},
methods: {updateMessage () {
// 通过全局事件总线来进行交互，// 第一个参数是要 回调父组件中的办法名，前面能够跟参数，多个或者对象都能够
this.$bus.$emit('updateMsg')
},
updateMessage2 (value) {this.$bus.$emit('updateMsg2', value)
}
}
}
</script>
二、全局事件总线和 Props 实现组件通信的区别
集体应用总结的哈：
props用来实现组件之间通信，更多的不便于父子组件通信。如果是祖孙或者兄弟组件，将会多一层中间层，而且没有任何用途，而且给人的感觉比拟繁琐。
全局事件总线 的话，将它挂在 vm 原型上，对于祖孙组件、或者兄弟组件之间通信，十分的不便，不须要中间层。
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。