关于vue.js:后端小伙伴来学前端了Vue中利用全局事件总线实现组件之间通信

月亮啊月亮

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

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

前言

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

后语

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

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

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

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

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