乐趣区

关于vue.js:后端小伙伴来学前端了Vue中全局事件总线GlobalEventBus原理及探究过程

前言

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

我说过,在 Vue 中如果咱们用(@orv-on )给组件绑定上一个自定义事件,其本质就是给子组件 VueComponentvc绑定一个事件,而后子组件通过 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 组件本身。即是图示中的第一步。

// 回车减少一个 todo
addTodo (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'])

后语

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

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

大家好,我是博主 宁在春:主页

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

心愿:咱们,待别日相见时,都已有所成

退出移动版