Vue之事件总线

Vue的事件总线是为了各个组件之间进行通信，目前我知道的组件之间通信就是props，emit事件，分别是父子，子父之间的通信，但是vue还有混入和vuex还有其它的通信，我们现在只对$bus,即事件总线做介绍。

• 事件总线还是非常好用的，它可以撮合任意组件之间进行通信，它的存在就和第三者一样，相当于在两个组件之间做个中介，而且它本身也是一个类组件，就是和组件差不多，所以相当于中间商。

• 首先我们需要将事件总线挂载到Vue原型上，这样我们就可以通过this进行调用（在main.js文件中）：

new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

• 既然挂载好了，那么就使用了，首先创建componentA，通过$emit来触发事件并传递参数:

// ComponentA.vue

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>

export default {
  methods: {
    sendMessage() {//触发
      this.$bus.$emit('message', 'Hello from Component A!');
    }
  }
}
</script>

• 然后创建componentB,用来监听事件和做对应的逻辑处理：

// ComponentB.vue

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {//进行监听
    this.$bus.$on('message', this.receiveMessageMethod);
  }，
  methods:{
      receiveMessageMethod(message){
          this.receivedMessage=message
      }
  },
 beforeDestroy() {//进行解绑
     this.$bus.$off('message')
 }
}
</script>

• 从上面的两个交互代码我们可以看出，组件之间约定了一个事件的标识，一个组件触发这个标识，可以传递数据，然后另外一个组件监听标识，然后调用对应方法，最后在组件销毁前进行标识的解绑。