本文共 1721 字，大约阅读时间需要 5 分钟。

Vue Bus 总线

作用：在vue中实现非父子组件之间通信。

场景：bus适合小项目、数据被更少组件使用，或者数据量少的项目。

本质：实际上是一个发布订阅者模式的使用，利用 vue 的自定义事件机制，在触发时通过 $emit 向外发布一个事件，而在需要使用的页面，通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心，用它来作为沟通桥梁，可以向该中心注册发送事件或接收事件。

实现：

1. 使用一个空的 Vue 实例(bus.js)作为中央事件总线。

   // bus.jsimport Vue from 'vue';const bus = new Vue();export default bus

   然后在需要使用的组件中引入

2. 把 bus 定义在 vue 的 prototype 上，在全局使用。

   同样的我们在创建 bus 后，可以在 main.js 中去引入 bus，然后将其挂载在vue实例上。

   import bus from './bus.js'Vue.prototype.$bus = bus

3. 或者使用插件 vue-bus 也可以。

   npm i vue-bus --save

   在 main.js 中引入：

   import VueBus from 'vue-bus'Vue.use(VueBus)

4. 手动实现 Bus 类。

   class Bus {
            constructor() {
                // 定义回调函数        this.callback = {
        }    } 	// 事件注册监听       $on(name, fn) {
                this.callback[name] = this.callback[name] || []        this.callback[name].push(fn)    }    // 触发事件    $emit(name,args) {
                if (this.callback[name]) {
                    // 遍历所有的 callback            this.callback[name].map(cb => cb(args))        }    }    // 移除事件    $off(name) {
                if (this.callback[name]) {
                    delete this.callback[name]        }    }}

   使用：

   const bus = new Bus()bus.$on('fn1', function (msg) {
            alert(`订阅的消息是：${
          msg}`)})bus.$emit('fn1', 'Hello World!')

注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况。

如果想要移除事件的监听，如下：

// 移除应用内所有对此事件的监听bus.$off('fn1')bus.$off('fn1', {
   })// 移除所有事件频道bus.$off()

那么在实际使用时，我们在需要触发组件里使用 $emit 来触发，并传递相关的值给监听器回调，而在需要接收的页面里使用 $on 去监听对应的自定义事件，并在回调函数中接收传来的值。

// A组件this.bus.$emit('fn', {
    value: 'test' })// B组件this.bus.$on('fn', data => {
       console.log(data);  // { value: "test" }})

当在 B 组件中的 created 生命周期函数中调用了 $on 后，对应的事件就会被监听，当 $emit触发后，$on 这边就会对应的产生响应。

公众号：Coder 杂谈，欢迎关注

转载地址：http://cxbcz.baihongyu.com/