Vue BUS总线

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 后，对应的事件就会被监听，当 $emit触发后，$on 这边就会对应的产生响应。

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