全域性事件匯流排又名：GlobalEventBus

安裝全域性事件匯流排

beforeCreate() {
    Vue.prototype.$bus = this
}

使用事件匯流排

提供資料

this.$bus.$emit('xxx',資料)

接收資料

this.$bus.$on('xxx',資料)

注意：最好在 beforeDestroy 鉤子中，用 $off 去解綁當前元件所用到的事件

beforeDestroy(){
    this.$bus.$off('xxx')
}

例項

src 檔案結構

|-- src
    |-- App.vue
    |-- main.js
    |-- components
        |-- MyStudent.vue
 

App.vue

<template>
    <div class="app">
        <h2>{{msg}}</h2>
        <h2>學生姓名為：{{StudentName || '未收到'}}</h2>
        <my-student/>
    </div>
</template>

<script>

    import MyStudent from "@/components/MyStudent";

    export default {
        name: 'App',
        components: {MyStudent},
        data() {
            return {
                msg: '你好',
                StudentName: ''
            }
        },
        // 接收資料
        mounted() {
            this.$bus.$on('hello', (data) => {
                console.log('我是 App 收到學生姓名為：', data)
                this.StudentName = data
            })
        },
        beforeDestroy(){
            this.$bus.$off('hello')
        }
    }
</script>

<style scoped>
    .app {
        background-color: #979696;
        padding: 5px;
    }
</style>
 

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

MyStudent.vue

<template>
    <div class="student">
        <h2>學生姓名：{{name}}</h2>
        <h2>學生年齡：{{age}}</h2>
        <button @click="sendStudentName">把學生名給 App</button>
    </div>
</template>

<script>
    export default {
        name: "MyStudent",
        data(){
            return {
                name:'張三',
                age:19
            }
        },
        methods:{
            // 提供資料
            sendStudentName(){
                this.$bus.$emit('hello',this.name)
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: #b2dece;
        padding: 5px;
        margin-top: 30px;
    }
</style>