EventBus使用詳細介紹，vue兩個頁面通訊

一、初始化
首先需要創建事件總線並將其導出，以便其它模塊可以使用或者監聽它。我們可以通過兩種方式來處理。先來看第一種，新創建一個 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

實質上EventBus是一個不具備 DOM 的組件，它具有的僅僅只是它實例方法而已，因此它非常的輕便。

另外一種方式，可以直接在項目中的 main.js 初始化 EventBus :

// main.js
Vue.prototype.$EventBus = new Vue()

二、發送事件

假設你有兩個Vue頁面需要通信： A 和 B ，A頁面 在按鈕上面綁定了點擊事件，發送一則消息，想=通知 B頁面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '來自A頁面的消息');
    }
  }
}; 
</script>

接下來，我們需要在 B頁面 中接收這則消息。

三、接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A發送來的消息
      this.msg = msg;
    });
  }
};
</script>

同理我們也可以在 B頁面 向 A頁面 發送消息。這里主要用到的兩個方法：

// 發送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 監聽接收消息
EventBus.$on(channel: string, callback(payload1,…))

 

作者：向建峰_Javan

鏈接：http://www.imooc.com/article/289043