全局事件

main.js文件：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//1.全局事件：多个组件调用一个地方（如：X），由这么一个地方在返回各个组件想要的数据
//如何让多个组件调用这么一个地方（X）
//1.让所有组件可以看到他   ：Vue.prototype.x 在vue的原型上添加属性；可以所有组件都可以调用
//2.直接在vm里面写入，目的是第一条简便写法
  // beforeCreate(){   使用beforecreate的目的在没有初始化之前写入以下方法
  //  Vue.prototype.$bus = this //$bus 任意起的名字 意思是总线的意思    this指向vm
  // }
//3.$on(点击) $emit(传递) $off()
//4.school想要属性值，在找vm要，vm将student上值给school
new Vue({
  el:'#app',
  render: h => h(App),
  //安装全局事件总线  beforeCreate = 在还没有初始化之前
  beforeCreate(){
    Vue.prototype.$bus = this //$bus 任意起的名字 意思是总线的意思  
  }
})

　　student.vue文件

<template>
  <div class="demo">
    <h3>学生姓名:{{name}}</h3>
    <button @click='wsx'>把学生姓名给school</button>
  </div>
</template>

<style>
  .demo{
    color: #42B983;
  }
</style>

<script>
  export default {
    name:'Student',
    data(){
      return {
        name:'wei1111 '
      }
    },
    mounted(){
      //console.log('Student',this.x)
    },
    //当点击button，把值传给vue.prototype
    methods:{
      wsx(){
        
        this.$bus.$emit('hello',111)
      }
    }
  }
</script>


<style>
  .demo{
    color: #42B983;
  }
</style>

　　scholl.vue文件

<template>
  <div class="demo">
    <h3>学校名称:{{name}}</h3>
  </div>
</template>

<script>
  export default {
    
    name:'School',
    data(){
      return{
        name:'渲染学校'
      }
    },
    mounted(){
      //console.log('School',this.x)
           //this指向school实例对象上vue.prototype  
       //在由main受到的student值给school 
      this.$bus.$on('hello',(data)=>{
        console.log('我是school，接收到了student数据',data)
      });
    },
    //克隆完hello后，进行销毁
    beforeDestroy(){
      this.$bus.$off('hello')
    }
  }
</script>

<style scoped> 
  .demo{
    color: red;
  }
</style>