Vue - 全局事件总线

全局事件总线

一种组件间的通信方式，适用于任意组件间通信。

使用方式#

1.安装全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

2.使用事件总线
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件身上。

<template>
  <div>
    <h2>{{receiveName}}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data(){
    return{
      receiveName:""
    }
  },
  methods:{
    rec(name){
      console.log("准备接收数据");
      console.log("接收到学生姓名"+name);
      this.receiveName = name
    }
  },
  mounted() {
    this.$bus.$on("receive",this.rec)
  }
}
</script>

提供数据：this.$bus.$emit('自定义事件名',数据)

<template>
  <div>
    <button @click="sendName">发送学生信息给学校</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data(){
    return{
      name:"张三"
    }
  },
  methods:{
    sendName(){
      this.$bus.$emit("receive",this.name)
    }
  }
}
</script>