Vue EventBus事件偵聽（$on、$emit、$off、$once）

eventBus.js

import Vue from 'vue';

export const EventBus = new Vue();

components/Parent.vue

<template>
    <div>
        我是父元件
        <Son></Son>
    </div>
</template>

<script>
/*
vm.$on( event, callback )
引數：
{string | Array<string>} event (陣列只在 2.2.0+ 中支援)
{Function} callback
用法：
監聽當前例項上的自定義事件。事件可以由 vm.$emit 觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。


vm.$once( event, callback )
引數：
{string} event
{Function} callback
用法：
監聽一個自定義事件，但是隻觸發一次。一旦觸發之後，監聽器就會被移除。


vm.$off( [event, callback] )
引數：
{string | Array<string>} event (只在 2.2.2+ 支援陣列)
{Function} [callback]
用法：
移除自定義事件監聽器。
如果沒有提供引數，則移除所有的事件監聽器；
如果只提供了事件，則移除該事件所有的監聽器；
如果同時提供了事件與回撥，則只移除這個回撥的監聽器。


vm.$emit( eventName, […args] )
引數：
{string} eventName
[...args]
觸發當前例項上的事件。附加引數都會傳給監聽器回撥。
 */
 import Son from '../components/Son';
 import {EventBus} from '../eventBus';

    export default {
       components: {
           Son,
       },
       mounted () {
           //監聽grandson事件
           EventBus.$on("grandson",this.handleMmsg);
       },  
       methods: {
           handleMmsg(msg) {
               console.log(msg);
               //移除事件監聽，故Parent只監聽一次
               EventBus.$off("grandson",this.handleMmsg);
           }
       },
    }
</script>

<style scoped>

</style>

components/Son.vue

<template>
    <div>
        <hr>
        我是子元件 
        <br>
        <Grandson></Grandson>
    </div>
</template>

<script>
    import Grandson from '../components/Grandson';
    import {EventBus} from '../eventBus';

    export default {
        components: {
            Grandson,
        }, 
        mounted () {
            //監聽事件
            EventBus.$on("grandson",(msg)=>{
                console.log(msg);
            });
        },     
    }
</script>

<style scoped>

</style>

components/Grandson.vue

<template>
    <div>
        <hr>
        我是孫子元件
        <br>
        <button @click="handleMsg">點選發出訊息</button>
    </div>
</template>

<script>
    import {EventBus} from '../eventBus';
    export default {
        methods: {
            handleMsg() {
                //發出grandson事件
                EventBus.$emit("grandson","我是元件GrandSon")
            }
        },
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <Parent></Parent>
  </div>
</template>

<script>
import Parent from './components/Parent'

export default {
  name: 'App',
  components: {
    Parent,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果截圖：