Vue通过总线实现任意两个组件的通信

2019-11-30

在写Vue的项目时，我们在一些组件中需要与其他组件进行通信，当然这里的通信不是父子之间的通信，首先，毋庸置疑的是肯定可以通过Vuex来实现的，但是有时候整体项目不是很庞大，总体组件也不是很复杂，用Vuex有点杀鸡用牛刀了，那么这时候我们就可以借助一个空的Vue实例作为中央事件总线来实现任意两个组件之间的通信。

<div id="app" style="text-align: center; margin-top: 100px;">
  <one></one>
  <two></two>
</div>

let bus = new Vue({}) // 为了方便在一个组件中使用bus，在实际的运用中一般会新建一个bus.js
 
Vue.component('one', {
  template: `<div>{{msg}}</div>`,
  data () {
    return {
      msg: 'Hello zy'
    }
  },
  created () {
    bus.$on('setMsg', val => {
      this.msg = val
    })
  }
})
 
Vue.component('two', {
  template: `<button @click="sendMsg">change msg</button>`,
  methods: {
    sendMsg () {
      bus.$emit('setMsg', 'wo bu zy')
    }
  }
})
 
new Vue({
  el: '#app'
})

实际效果：
result

在实际项目运用中，我们一般会将bus单独抽离出来:

bus.js

1
2
3

import Vue from 'vue'
const bus= new Vue()
export default bus

然后在需要调用的组件中先引用bus.js
组件one

import bus from 'bus'
 
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    bus.$emit('msg', 'hi zy')
  }
}

组件two

import bus from 'bus'
 
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    bus.$on('msg', 'wo bu zy')
  }
}

但是这种引入方式，经过webpack打包后可能会出现bus局部作用域的情况，即引用的是两个不同的bus，导致不能正常通信。
我们其实也可以直接在main.js中注册bus
main.js

import Vue from 'vue'
import bus from 'bus'
 
Vue.use(Vue)
Vue.use(bus)
 
new Vue ({
  el:'#app'　　
})

然后在需要进行通信的两个组件中通过this.$bus.$emit()和this.$bus.$on()来调用
组件one

1
2
3

created () {
  this.$bus.$emit('updateData', {msg: 'hi zy', value: 666})
}

组件two

mounted () {
  this.$bus.$on('updateData', obj => {
    this.msg = obj.msg
    this.value = obj.value
  })
}

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

1
2
3

beforeDestroy () {
  this.$bus.$off('updateData')
}

一个正在成长的前端小白~