Vue BUS总线

喜欢ヅ旅行 2021-09-03 04:11 366阅读 0赞

## Vue Bus 总线 ##

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

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

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

实现：

1.  使用一个空的 Vue 实例(bus.js)作为中央事件总线。
    
        // bus.js
        import 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 后，对应的事件就会被监听，当  e m i t 触 发 后 ， emit 触发后， emit触发后，on 这边就会对应的产生响应。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/e41bfbb5826748c8a8e17df364774cb7.png