說起EventBus，其實它現在之所以沒怎麼提及是因為有個Vuex替代了它，解決了EventBus導致的專案後期難以維護的問題。

　　今天，就來用EventBus的釋出訂閱模式來實現訊息通訊。

　　demo：

// 首先在 Vue 的入口檔案 main 中掛載

Vue.prototype.$bus = new Vue();

// 接著在B頁面使用 this.$bus.$meit('target', params) 實現一個釋出
<template>
  <div>
    <h1>這是B的頁面</h1>
    <input v-model="message" />
    <button @click="_toAPage">釋出</button>
    <router-link tag="div" class="tab-item" to="/fangao">
      <span class="tab-link">轉到A</span>
    </router-link>
  </div>
</template>
<script>
import Bus from 
 
'../base/event-import'
export default {
  data() {
    return {
      message: "告訴A！"
    }
  },
  methods: {
    _toAPage () {
      var _this = this;
      _this.$bus.$emit('tellA', _this.message);
    }
  },
    
}
</script>
<style>
  body {
    padding: 0;
    margin: 0;
  }
  .tab-item {
    width: 
 
100%;
    position: fixed;
    bottom: 0;
    margin: 16px 0;
  }
  .tab-link {
    border: palevioletred 1px solid;
    text-align: center;
    padding: 10px;
  }
</style>

// 現在在A頁面使用this.$bus.$on('target')來實現訂閱

<template>
  <div>
    <h1>這是A的頁面</h1>
    <div class="content">{{getMessage}}</div>
    <router-link tag="div" class="tab-item" to="/">
      <span class="tab-link">轉到B</span>
    </router-link>
  </div>
</template>
<script>
import Bus from 
 
'../base/event-import'
export default {
  data() {
    return {
      getMessage: ''
    }
  },
  created () {
    var _this = this;
    _this.$bus.$on('tellA', target => {
      _this.getMessage = target;
    })
  },
  methods: {
    
  },
  beforeDestroy() {
     this.$bus.$off('tellA');
    },
}
</script>
<style>
  body {
    padding: 0;
    margin: 0;
  }
  .content {
    text-align: center;
    height: 100%;
    widows: 100%;
  }
  .tab-item {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin: 16px 0;
  }
  .tab-link {
    border: palevioletred 1px solid;
    text-align: center;
    padding: 10px;
  }
</style>

在這裡要在Vue.app使用keep-alive防止路由跳轉重新重新整理。

// Vue.app

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

實現效果：