Vue 全局事件总线

全局事件总线又名：GlobalEventBus

安装全局事件总线

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

使用事件总线

提供数据

this.$bus.$emit('xxx',数据)

接收数据

methods: {
	demo(data){...}
},
mounted(){
	this.$bus.$on('xxx',this.demo)
}

接收数据还有一种方法

mounted(){
	this.$bus.$on('xxx',(data)=>{...})
}

注意：最好在 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>

---