任意组件间通信

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this;//安装全局事件总线,$bus就是当前应用的vm
  }
}).$mount('#app')

<template>
  <div class="school">
   <h2 >学生姓名{{name}}</h2>
   <h2>学生性别{{sex}}</h2>
   <button @click="dianji()">点击传递</button>
  </div>
</template>
<script>
export default {
  name:'Student',
  data() {
    return {
      name:'小韩',
      sex:'女',
      x:12, 

    }
  },
  methods:{
    dianji() {
      this.$bus.$emit('hello',66)
    }
  }

}
</script>

<template>
  <div class="school">
   <h2 class="title font">学生姓名{{name}}</h2>
   <h2>学生性别{{sex}}</h2>
  </div>
</template>

<script>
// 引入一个混合
export default {
  name:'School',
  data() {
    return {
      name:'刘刘刘131414',
      sex:'男',
      x:12 
    }
  },
  mounted() {
    this.$bus.$on('hello',(value) => {
      console.log('收到了student传来的数据',value);
    })
  },
  beforeDestroy() {
    this.$bus.$off('hello')
  }
}
</>

<style scoped>
/* scoped让样式局部生效,防止污染其他组件 */
  .school{
    background-color: red;
  }
</style>