vue2知识点：全局事件总线（GlobalEventBus）

在这里插入图片描述
@[toc]

3.22全局事件总线（GlobalEventBus）

在这里插入图片描述

使用步骤：
1.main.js定义“全局事件总线”
2.在A组件想接收数据，定义this.$bus.$on和this.$bus.$off
3.在B组件想发送数据，定义this.$bus.$emit
1.main.js定义“全局事件总线”

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

2.在A组件想接收数据，定义this.$bus.$on和this.$bus.$off

mounted() {
    // console.log('School',this)
        this.$bus.$on('hello',(data)=>{
            console.log('我是School组件，收到了数据',data)
        })
    },
    beforeDestroy() {
        this.$bus.$off('hello')
    }

3.在B组件想发送数据，定义this.$bus.$emit

methods: {
    sendStudentName(){
        this.$bus.$emit('hello',this.name)
    }
}

注意点1：

问题：“全局事件总线”需要哪些特点？

答案：
1）被所有组件(vc、vm)能够看得见
2）能够调用$on、$emit、$off

注意点2:

问题：Vue原型对象上面的所有属性和方法是给谁用的？

答案：是给所有的vm和vc使用的

注意点3：

问题：为什么定义“全局事件总线”要放在main.js文件中？

答案：因为哪里引入Vue，哪里才会去定义“全局事件总线”

注意点4：

问题：为什么定义“全局事件总线”要放在beforeCreate的钩子函数中？

答案：原因1，beforeCreate钩子函数里this指代new出来的vm，原因2，在beforeCreate钩子函数里模板还没解析，数据监测和数据代理也还没完成呢。也就是说借助这个beforeCreate钩子函数你把想做的事儿做好了，原型上该放的放好了，随后模板开始解析，等组件执行的时候你该放的都放好了，后续才做都不会产生影响。

注意点5：

问题：如何避免在使用“全局事件总线”时自定义函数名重名使用问题？比如组件1使用自定义函数名叫demo，那组件2不全文搜索也使用了自定义函数名也叫demo，这就混了

答案：真实项目中src目录下创建一个config文件夹，里面创建个constants常量文件，里面用来定义要使用的自定义函数名，方便别人查看并避免重名问题。

注意点6：

问题：为什么要在组件销毁之前，把“全局事件总线”中定义的自定义事件函数解绑？那“知识点3.13自定义事件”中咋没说解绑的事儿呢？

答案：“知识点3.13自定义事件”中组件销毁了== vc销毁了，vc销毁了自定义事件也就销毁了，而“全局事件总线”中定义的自定义函数是一直存在的，哪怕使用组件销毁了，但是Vue实力定义的“全局事件总线”中还是会存在自定义事件，所以需要在组件销毁之前进行解绑。

注意点7：销毁“全局事件总线”中定义的自定义事件请放在beforeDestroy()钩子中

注意点8：子组件中使用“全局事件总线”时this.$bus.$on()中回调配置要使用箭头函数，不要使用普通函数，箭头函数中this才指代vc，而普通函数中this指代vue实例，因为最终要在school组件上接收平行组件发过来的消息，所以要使用vc，而不是要使用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 //安装全局事件总线
    },
})

App.vue

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <School/>
    <Student/>
  </div>
</template>

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

export default {
  name:'App',
  components:{School,Student},
  data() {
    return {
      msg:'你好啊！',
    }
  }
}
</script>

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

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:'男',
            }
        },
        mounted() {
            // console.log('Student',this.x)
        },
        methods: {
            sendStudentName(){
                this.$bus.$emit('hello',this.name)
            }
        },
    }
</script>

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

School.vue

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

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

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