Vue.js 链vuejs组件之间的通信

我想在两个分离的组件之间进行通信。它们不是父组件和子组件

---

我知道在父组件和子组件之间有两种通信方式。但是，我不知道独立组件之间的通信。

您可以实现EventBus来在不同组件之间进行通信。仅为事件创建另一个vue实例

vueEventManager.js

import Vue from 'vue';

class vueEventManager {
  constructor() {
      this.vue = new Vue;
  }
  trigger(event, data = null) {
      this.vue.$emit(event, data);
  }
  listen(event, callback) {
      this.vue.$on(event, callback);
  }
  off(event, callback) {
      this.vue.$off(event, callback);
  }
  once(event, callback) {
      this.vue.$once(event, callback);
  }
}

export default vueEventManager;

然后您可以在main.js文件中注册它：

import vueEventManager from './folder/vueeventmanager';
window.EventsBus = new vueEventManager();

现在，您可以在组件中使用它来发出事件

EventsBus.trigger('eventName', {'valueName': value})

听他们说

created() { //registering listener it in created hook
    EventsBus.listen('eventName', (value) => {
            //do something
          });
}

---

事件总线是处理smpile组件通信的好方法。对于大型复杂应用程序，您可以将其用作数据存储，在不同组件之间共享数据。

window.Event=new vueEventManager（）这将导致一个大问题；覆盖主javaScript
事件
对象。如果要将事件总线绑定到窗口，请选择另一个名称。例如
window.EventsBus=new vueEventManager（）