月亮啊月亮

你能照见南边，也能照见北边

照见她，你跟她说一声，就说我想她了。

前言

前一篇文章写了 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原型上，对于祖孙组件、或者兄弟组件之间通信，十分的不便，不须要中间层。

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿：咱们，待别日相见时，都已有所成。