前言

上一篇文章写了 Vue 中的自定义事件，自定义事件是全局事件总线根底。我在上一篇文章中埋下了一个小小的伏笔。如下图：

我说过，在Vue中如果咱们用（@orv-on ）给组件绑定上一个自定义事件，其本质就是给子组件VueComponent即vc绑定一个事件，而后子组件通过this.$emit()触发，父组件监听到再执行回调办法。这种也只适宜于父子组件之间通信，对于兄弟组件来说，依然无奈十分不便的通信。

那全局事件总线是什么样的呢？

一、全局事件总线前述

提供一个思考方向：

其余组件同样如此。

那么到这一步，咱们要明确一件事件哈，全局事件总线，全局两个字，意思是在全局都可能拜访到。并且可能绑定办法呢？

即xxxx中保障要可能有$on、$off、$emit这些办法，才可能实现组件间通信。

那么只有哪里有？？

咱们之前给子组件绑定自定义事件的时候，其本质是不是给子组件的实例对象new VueComponent绑定上一个自定义事件。

在这个全局事件总线中，咱们就不能再给每个组件的实例对象来绑定自定义事件了，而是要将自定义事件绑定到一个全副组件都可能拜访的对象上。

那么那个对象大家都可能拜访？看下图吧。

---图：来自于尚硅谷-张天宇老师

咱们将它放在vue原型上，那么全局事件总线就可能做到任意间组件通信拉。

二、装置全局事件总线

咱们弄明确要去找谁了，就要将它定义进去，不然怎么用啊。

规范定义如下：

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 对于全局总线的应用阐明// 应用全局总线的时候，更好的利用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到间接通信，这个应用全局事件总线会不便很多new Vue({  render: h => h(App),  // beforeCreate 位于数据挂载之前的生命周期函数  beforeCreate () {    // 装置全局事件总线   $bus就是以后利用的vm  这里的this就是以后的new Vue()    Vue.prototype.$bus = this  }}).$mount('#app')

beforCreate()办法

是泛滥生命周期中最后面的一个。在此时，它的this就是以后的vue.

三、应用全局事件总线

1、接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件本身。即是图示中的第一步。

// 回车减少一个todoaddTodo (todo) {    this.todos.unshift(todo)},    // 判断勾选不勾选    checkTodo (id) {        this.todos.forEach((todo) => {            if (todo.id === id) todo.done = !todo.done        })    },        // 删除一个todo        deleteTodo (id) {            this.todos = this.todos.filter(todo => todo.id !== id)        },            // 全选全不选            checkAllTodos (done) {                this.todos.forEach((todo) => { todo.done = done })            },                // 革除所有已实现的工作                clearDoneTodos () {                    this.todos = this.todos.filter(todo => !todo.done)                }},    // 在加载实现后就进行全局总线的绑定    mounted () {        this.$bus.$on('addTodo', this.addTodo)        this.$bus.$on('checkTodo', this.checkTodo)        this.$bus.$on('deleteTodo', this.deleteTodo)    },

2、提供数据：this.$bus.$emit('xxxx',数据)

  methods: {    add () {      // 1. 查看输出合法性      const title = this.title.trim()      if (!title) {        alert('请输出内容')        return      }      const id = uuidv4()      // 2. 依据输出生成一个todo对象      const todo = { id, title, done: false }      // 3. 增加到todos      this.$bus.$emit('addTodo', todo)      // 4. 革除输出      this.title = ''    }  }}

留神：最初在beforeDestory钩子中，用$off去解绑以后组件所用到的事件。

如下图：

解绑有多种形式，$off() 不写参数，是间接解绑全副

一个参数$off('xxx')是解绑一个，解绑多个能够写成$off(['xx','xxx'])

后语

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

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

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

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

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