VUE：EventHub

想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。

而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能：

let eventHub = new Vue()

// 监听
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventHub.$emit('eventName', data)

// 去掉监听
eventHub.$off('eventName')

使用方法：

1-1、 在顶层组件的 data 里初始化 EventHub，并使用 provide 对外暴露这个 EventHub。

import Vue from "vue";

export default {
  name: "App",
  components: {
    GrandParent
  },
  data() {
    return {
      eventHub: new Vue()
    };
  },
  provide() {
    return {
      eventHub: this.eventHub
    };
  },
  methods: {
    setRandomValue() {
      this.eventHub.$emit("update:msg", Math.random() * 100);
    }
  }
};

 1-2、然后在需要监听的组件里用 inject 注入这个依赖，并在 created 里添加事件监听。

export default {
  inject: ["eventHub"],
  data() {
    return {
      msg: ""
    };
  },
  created() {
    this.eventHub.$on("update:msg", msg => {
      this.msg = msg;
    });
  }
};

 2-1、在main.js注入

// 注入
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue() 

主页面：

<hello-world></hello-world>
<el-button type="primary" @click="senddata">发送</el-button>

import HelloWorld from '../components/HelloWorld.vue'
components: {
    HelloWorld
},
methods: {
    senddata(){
        this.$eventHub.$emit("hhh", "哈哈");
    }
}

组件页面：

created() {
    // 绑定接收回调过来的事件处理 
    this.$eventHub.$on("hhh", msg=>{
        console.log(msg);
    });
},