Vue中父子元件通訊的方式是：父元件通過props向下傳遞資料給子元件，子元件通過$emit事件告訴父元件。對於沒有引用關係的兄弟元件，若不需要Vuex，可以考慮通過EventBus(即事件匯流排)來實現通訊。

初始化

有兩種初始化方式，一種例項化一個新的Vue物件來建立，推薦放到一個單獨的js檔案中。

var eventBus = new Vue()

另外一種是直接在main.js中掛載到prototype上。

Vue.prototype.$EventBus = new Vue()

傳送事件

EventBus.$emit("msgName", msg)

假設有兩個兄弟元件，元件a和元件b。通過點選元件a向元件b傳值。

元件a:

<!-- 元件A -->
<template>
<button @click="sendMsg()">按鈕A, 向B傳值</button>
</tempalte>

<script>
	import {eventBus} from "./EventBus.js"
    export default {
        data(){
            return {
                msg: "元件A的值"
            }
        }
        methods: {
            sendMsg(){
                eventBus.$emit("fromA2B", this.msg)
            }
        }
    }
</script>
 

接收事件

EventBus.on("msgName", function)

<!-- 元件B -->
<template>
<button @click="reset()">{{msg}}</button>
</tempalte>

<script>
	import {eventBus} from "./EventBus.js"
    export default {
        data(){
            return {
                msg: "按鈕B,準備接收A的值"
            }
        }
        watch:{
        	msg(newVal, oldVal){
                console.log('B的值改變了')
            }
    	},
		mounted(){
            eventBus.$on("fromA2B", e => {
                this.msg = e
            })
        }
    }
</script>
 

事件移除

在Vue頁面銷燬後，需要移除EventBus事件監聽。

import { eventBus } from './Event-bus.js'
eventBus.$off('fromA2B', {})