Question

我正在使用vue中的事件发射器来使主应用与组件进行通信，只要我将应用和所有组件都放在一个.js文件中，它就可以正常工作。

但是现在我希望将它们分开，每个文件一个组件，而且显然我不能再使用事件发射器了，因为app在模块中似乎是未定义的。

我需要更改什么才能使应用程序和组件再次通信？

我的代码：

my-app.js

import My from '/my-module.js';

const app = new Vue({
  router: new VueRouter({
    mode: 'history',
    routes: [{
      path: '/',
      component: My,
    }]),

  methods: {

    created(){
       this.ws = new WebSocket(...);
       this.ws.onmessage = event => {
         this.$emit('message', e);
       }
    }

  }

}).$mount('#app');

my-module.js

export default {

  template: `....`

  created(){
    // I want to be able to access 'app' here
    // or another way to receive the messages
    console.log(app);
    app.$on('message', ...)

  }    

}

如您所见，我只需要这个，因为我正在使用websockets并且该应用程序包含websocket客户端。收到某些消息后，组件需要执行某些操作。

Answer 1

就您而言，您可以在多个组件中使用这些事件，特别是在应用仍在增长的情况下。我认为您最好使用eventbus来对emit和catch都使用。

此处介绍如何在vuejs中使用eventbus：https://alligator.io/vuejs/global-event-bus/。

在这种情况下：

import { eventBus } from 'path/to/file';

...

methods: {
    created(){
       this.ws = new WebSocket(...);
       this.ws.onmessage = event => {
         eventBus.$emit('message', e);
       }
    }
}

其他组件：

import { eventBus } from 'path/to/file';
...

created() {
  eventBus.$on('message',() => ) {
    // code
  }
}

将变量传递给vuejs模块

1 个答案: