vue事件总线

定义

1.在组件中定义

// 在组件中
import Vue from 'vue'
export const EventBus = new Vue()

2.在全局中定义（main.js文件）

// 创建全局EventBus
Vue.prototype.$EventBus = new Vue()

var EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
	$bus: {
		get: function () {
			return EventBus
		}
	}
}

组件中使用

1.发送事件

如果有两个组件之间需要通信，A组件与B组件 ，A组件中点击按钮发送了消息，想通知B组件，使用$emit发送信息

 <!-- A组件 -->
<template>
    <button @click="sendMsg()">-</button>
</template>
 
<script> 
export default {
  省略...
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 

2.接收事件

使用$on用来接收信息

 <!-- B组件 -->
<template>
  <p>{{msg}}</p>
</template>
 
<script> 
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
 
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

3.移除事件

// 移除指定的事件监听
EventBus.$off('aMsg', {})
// 移除所有的事件监听
EventBus.$off()

全局中使用

使用两个方法 $on 和 $emit ，一个用于创建发出的事件，它就是 $emit ；另一个用于订阅接收 $on

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
 
this.$bus.$on('nameOfEvent',($event) => {
})

我们可以在任意一个组件中使用

this.$bus.$on('updateMessage', function(value) {
  console.log(value); 
})

全局的事件总线也可以使用this.$bus.$off()来移除事件监听