Vue---全局事件总线（实现任意组件间通信）

目录

总结

一、实现

    main.js

  重要代码：

school.vue

重要代码

student.vue

重要代码

---

总结

一、实现

案例：由student.vue 向school.vue传输数据  其两文件之间的关系是兄弟关系

    main.js

// 该文件是整个项目的入口文件

// 引入vue，这个vue不能解析template配置项
import Vue from 'vue'
// 下面这个是引入完整版的vue。这个vue能解析template配置项
// import Vue from 'vue/dis/vue'

// 引入APP组件，它是所有组件的父组件
import App from './App.vue'

Vue.prototype.x={a:10}

// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建vue实例对象---vm
  new Vue({
    el:'#app',
    render: h => h(App),

      //这个里面的this是vm   此时模板还没有解析
      beforeCreate(){
        // Vue.prototype在原型上定义

        // 这个地方为什么不写等于vm？  因为当这个new Vue执行完成之后才有vm  我们现在还是在new vm中
        // 安装全局事件总线
        Vue.prototype.$bus = this
      }
  })
 

  重要代码：

      //这个里面的this是vm   此时模板还没有解析
      beforeCreate(){
        // Vue.prototype在原型上定义

        // 这个地方为什么不写等于vm？  因为当这个new Vue执行完成之后才有vm  我们现在还是在new vm中
        // 安装全局事件总线
        Vue.prototype.$bus = this
      }

school.vue

重要代码

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

student.vue

重要代码

        把学生名给School组件

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