全局事件总线

全局事件总线(GlobalEvenBus)

1.一种组件间通信的方式 适用于任意组件间通信
2.安装全局事件总线:在入口文件main.js中

// 该项目的入口文件
import Vue from 'vue'
// 引入App组件 他是说要组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
//创建vc麻烦写法
// const Demo = Vue.extend({})
// const d = new Demo()
// Vue.prototype.x = d
// 创建Vue实例对象 --vm
new Vue({
  el:'#app',
  // 完成了将App组件放入容器中
  render: h => h(App),
  //利用钩子函数挂载属性
  beforeCreate(){
    Vue.prototype.$bus = this //安装 全局事件总线 this指向vue原型
  }
})

3.使用事件总线
在需要接收的组件School中

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

<script>
export default {
  name: "School",
  props:['getSchoolName'],
  data() {
    return {
      name: "蓝翔",
      address: "新疆",
    };
  },
  mounted(){
    //绑定对应的自定义事件
    this.$bus.$on('hello',(data)=>{
      console.log('我是School组件.我收到了数据',data);//接收的一方完成之后，最好解绑某一个事件
    })
  },
  //解绑某事件
  beforeDestroy(){
    this.$bus.$off('hello')//有事件名代表解绑对应的事件 无事件名则全部解绑(如有人用 则不起作用)
  }
};
</script>
 
<style scoped>
.school{
  background-color: skyblue;
  padding: 5px;
}
</style>

.最好在beforeDestroy钩子中 用$off去解绑当前组件所用到的事件
4.在要传的组件Student中

<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
   <button @click="sendStudentName">把Student组件的name传给School组件</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name:"共产主义接班人",
      sex:24,
    };
  },
  methods:{
    sendStudentName(){
      //触发对应的自定义事件
      this.$bus.$emit('hello',this.name)//绑定的事件名 不可重复
    }
  }
 
 
};
</script>
 
<style scoped>
.student{
  background-color: rgb(131, 167, 228);
  padding: 5px;
}
</style>