月亮啊月亮 你能照见南边，也能照见北边 照见她，你跟她说一声，就说我想她了。
前言
前一篇文章写了 vue 中利用 Props 实现组件之间的通信，那种方式是最简单也是最基础的组件之间的通信方式。父组件通过 props 向下传数据给子组件，当子组件有事情告诉父组件时会通过$emit事件告诉父组件。对于父子组件，这种传递方式，是较为方便且实用的，但是对于祖孙组件或者兄弟组件，就显得不那么友善了。
在Vue本身的生态中，也有一个独立的Vuex库用来处理组件之间的通讯，但很多时候，咱们并不需要动用类似Vuex这种大杀招，而可以考虑更简单的 Vue 中的事件总线，即EventBus。
在这提出一个简单的思考:
一旦当你看到项目中,某段代码或者是要点很多下才能出来的变量,再或者获取到的方式都相同,这个时候你就一定要考虑能不能让代码达到复用,咱们要学会偷懒哈,偷懒才能前进的更快哈.
下面开始今天的正文哈…
一、什么叫全局事件总线
1.1、概念的引入
我们先认清一件事情，所谓的组件之间的交互，就是我们将数据能够做到组件之间能够共享数据。
无论是props、EventBus、Vuex、发布订阅等实现组件交互，本质就是做到数据共享。弄清这一点，对于使用全局事件总线，就简单多了哈。不过今天的文章，主要是先带着大家使用，原理等周末拉。
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
1.2、安装全局事件总线
代码语言：javascript复制//想要成为事件总线的条件：
//1、所有的组件对象必须都能看得到这个总线对象，因此我们把这个对象放在了Vue原型
//2、这个事件总线对象必须能调用$on和$emit方法（总线对象必须是Vue的实例化对象或者是组件对象）确定全局事件总线: 将vm对象作为事件总线挂载到vue的原型对象上
代码语言：javascript复制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组件
代码语言：javascript复制<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组件
代码语言：javascript复制<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原型上，对于祖孙组件、或者兄弟组件之间通信，非常的方便，不需要中间层。
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主宁在春：主页 一名喜欢文艺却踏上编程这条道路的小青年。 希望：我们，待别日相见时，都已有所成。
