全局事件总线

1.传值有父子组件传值，store（仓库），还有$bus全局事件总线 传值

2.前两个用的很多，一般项目中都会用到，下面我们来写一下兄弟组件传值（全局事件总线）。

3.全局事件总线是一种可以在任意组件间通信的方式，本质上就是一个对象。它必须满足以下条件：1. 所有的组件对象都必须能看见他 2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

//src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    }
})

//首先在 main.js 进行挂载全局

//src/App.vue
<template>
    <div class="app">
        <School/>
        <Student/>
    </div>
</template>

<script>
    import Student from './components/Student'
    import School from './components/School'

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

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

//然后找两个在一起的组件（这两个组件都要能看的见），如果使用了v-if来控制组件的显示隐藏，这样的书写方式是不会生效的。

//src/components/School.vue
<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'zzy',
                address:'北京',
            }
        },
        methods:{
            demo(data) {
                console.log('我是School组件，收到了数据：',data)
            }
        },
        mounted() {
            this.$bus.$on('demo',this.demo)
        },
        beforeDestroy() {
            this.$bus.$off('demo')
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

//在一个组件去接收，和你想要进行的操作步骤

//src/components/Student.vue
<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        },
        methods: {
            sendStudentName(){
                this.$bus.$emit('demo',this.name)
            }
        }
    }
</script>

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

//在一个组件里面去进行传值，给另一个接收的组件传递你想传递值

总结：

    全局事件总线（GlobalEventBus）

    1.一种组件间通信的方式，适用于任意组件间通信

    2.安装全局事件总线

new Vue({
       ...
       beforeCreate() {
           Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
       },
    ...
}) 

3.使用事件总线

    3.1 接收数据：A组件想接收数据，则在A组件中给 $bus 绑定自定义事件，事件的回调留在A组件自身

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

   3.2 提供数据：this.$bus.$emit('xxx',data)

4.最好在beforeDestory钩子中，用 $off去解绑当前组件用到的事件，要不然会叠加，出现bug