Question

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

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

Answer 1

您可以实现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
          });
}

链Vue.js组件之间的通信

1 个答案: