之前部落格中介紹了prop和呼叫事件的方式在父-子元件之間進行資料，這種方式在只有一層巢狀層時可以使用，但是路過存在多層巢狀，多層多個「兄弟」元件之間傳遞資料，就非常麻煩。對此，vue中提供了一種全域性事件匯流排機制，資料傳遞是通過一個空的Vue範例作為中央事件匯流排，通過它來觸發事件和監聽事件，可以實現幾乎任何元件間的通訊，這在一些比較小的專案中是非常好用的。

全域性事件匯流排相當於一個公共空間，任何元件都可以將事件繫結到其中，任何其他元件都可以去出發繫結到這個公共空間的方法，實現元件之間的資料互動。

使用全域性事件匯流排之前，需要在main.js中進行安裝：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//關閉Vue的生產提示
Vue.config.productionTip = false

//建立vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
    	Vue.prototype.$bus = this //安裝全域性事件匯流排
    },
})

元件將事件繫結到全域性事件匯流排中：

<template>
    <div class="demo2">
        <hello1 
        v-for="per in persons"
        :key="per.id"
        :perObj=per
        >
        </hello1>
    </div>
</template>

<script>
import hello1 from './hello1.vue'
    export default {
        name: 'hello2',
        data(){
            return {
                persons: [
                    { id: 1, name: '張三', age: 23 },
                    { id: 2, name: '李四', age: 34 },
                    { id: 3, name: '王五', age: 45 }
                ]
            }
        },
        components:{
            hello1
        },
        mounted() {
            this.$bus.$on('changeAge1', (id)=>{   // 將事件changeAge1新增到事件匯流排中
                this.persons.forEach((per)=>{
                    if(per.id === id) per.age += 1
                });
                console.log('id值為：', id, 'age值加1')
            })
        }
    }
</script>

其他元件觸發事件匯流排中的事件，實現資料互動：

<template>
    <div class="demo1">
        <h4>{{perObj.name}} 的年齡是：{{perObj.age}}</h4>
        <!-- 此處呼叫從父元件中傳過來的函數 -->
        <button @click="changeAge2(perObj.id)">修改年齡</button>
    </div>
</template>

<script>
    export default {
        name: 'hello1',
        props:['perObj'],
        methods: {
            changeAge2(id){
                this.$bus.$emit('changeAge1', id)
            }
        },
    }
</script>

Vue學習筆記（十）：全域性事件匯流排