Vue中全局事件总线的使用(一看就会)

Vue中适用于任意组件间的一种通信方式

---

前言

例如：针对图中的A组件和B-a组件，它们既不是父子组件，也不是兄弟组件。此时，我们可以考虑使用全局事件总线进行值传递。

---

具体使用方式如下: 

假设任意组件B中需要任意组件A中的某些数据

一、main.js中安装事件总线

  new Vue({
        el: '#app',
        router,
        components: { App },
        beforeCreate() {
            Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
        },
        template: '<App/>'
    })

二、组件A中发送数据

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>
<script>
  export default {
    name: '',
    methods: {
      sendMessage() {
        // 发送数据
        this.$bus.$emit('eventBus', '数据内容')
      }
  }
</script>

三、组件B中接收数据

// ComponentB.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      // 接收数据
      this.$bus.$on('eventBus', this.receiveMessage)
    },
    methods: {
      receiveMessage(val) {
        this.message = val
        console.log(this.message) // '数据内容'
      }
    }
  }
</script>

四、组件B中销毁全局事件总线

为避免免造成内存泄漏，使用时要注意销毁全局事件总线，在哪里接收数据，就在哪销毁，

销毁不影响二次使用

// ComponentB.vue
<script>
  export default {
    name: '',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$bus.$on('eventBus', this.receiveMessage)
    },
    // 销毁
    beforeDestroy() {
      this.$bus.$off('eventBus')
    },
    methods: {
      receiveMessage(val) {
        this.message = val
        console.log(this.message) // '数据内容'
      }
    }
  }
</script>

总结

B组件接收A组件的值，4个步骤:

        1. main.js中安装全局事件总线

        2. 组件A中用this.$bus.$emit('事件名'，val)发送要传的数据

        3. 组件B中用this.$bus.$on('事件名'，callback) 监听(接收)A传过来的数据

        4. 组件B中this.$bus.$off('事件名')移除事件监听(销毁全局事件总线)