javascript - 使用 EventBus 在组件之间传递数据

Question

这可能是一个新手问题，所以请原谅。

我正在尝试使用 EventBus 在组件之间传递数据，但我无法这样做。如果我将 EventBus 声明为 export default EventBus =new Vue();，我会收到 Cannot find module '../ui/EventBus.js' 错误但是，如果我将 EventBus 声明为 export const EventBus =new Vue();，我会收到 Error: render function or template not Defined in component: MainNavBar' 错误

我错过了什么？

ui\EventBus.js

import Vue from 'vue';
export default EventBus =new Vue();

ui\Login.vue

<script>
import {EventBus} from './EventBus.js';
export default 
{  
  methods: 
  { 
    LoginUserForDomain() 
    {
      EventBus.$emit('CurrentUserId', result.userId);
    }
  }
}
</script>

ui\components\MainNavBar.vue

<script>
import {EventBus} from '../ui/EventBus.js';
export default 
{  
  data() {
    return {
      currentUserId:null,
    };
  },
  mounted() 
  {
    EventBus.$on('CurrentUserId', (payload) =>
    {
      this.currentUserId = payload;
    });
  }
}
</script>

默认导出 EventBus 时的错误堆栈:

W20191201-08:43:19.168(-6)? (STDERR) Error: Cannot find module '../ui/EventBus.js'
W20191201-08:43:19.169(-6)? (STDERR)     at makeMissingError (packages\modules-runtime.js:222:12)
W20191201-08:43:19.172(-6)? (STDERR)     at Module.resolve (packages\modules-runtime.js:228:17)
W20191201-08:43:19.173(-6)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.14.0\npm\node_modules\reify\lib\runtime\index.js:45:25)
W20191201-08:43:19.174(-6)? (STDERR)     at src/imports/ui/components/CardFooter.vue:19:1
W20191201-08:43:19.174(-6)? (STDERR)     at MainNavBar.vue (src/imports/ui/components/MainNavBar.vue:599:1)
W20191201-08:43:19.175(-6)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191201-08:43:19.175(-6)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
W20191201-08:43:19.176(-6)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.14.0\npm\node_modules\reify\lib\runtime\index.js:52:22)
W20191201-08:43:19.177(-6)? (STDERR)     at createApp (src/imports/app.js:1:1)
W20191201-08:43:19.177(-6)? (STDERR)     at Promise (src/imports/server.js:30:52)
W20191201-08:43:19.178(-6)? (STDERR)     at new Promise (<anonymous>)
W20191201-08:43:19.178(-6)? (STDERR)     at Object.VueSSR.createApp (src/imports/server.js:29:10)
W20191201-08:43:19.179(-6)? (STDERR)     at VueSSR.ssrContext.withValue (packages/akryum:vue-ssr/server/index.js:96:31)
W20191201-08:43:19.180(-6)? (STDERR)     at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
W20191201-08:43:19.180(-6)? (STDERR)     at packages/akryum:vue-ssr/server/index.js:86:23
W20191201-08:43:19.181(-6)? (STDERR)     at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
W20191201-08:43:19.181(-6)? (STDERR)     at Promise (packages/akryum:vue-ssr/server/index.js:81:24)
W20191201-08:43:19.182(-6)? (STDERR)     at new Promise (<anonymous>)
W20191201-08:43:19.182(-6)? (STDERR)     at sink (packages/akryum:vue-ssr/server/index.js:73:20)
W20191201-08:43:19.183(-6)? (STDERR)     at onPageLoad.chain.callback (packages/server-render/server-register.js:14:19)
W20191201-08:43:19.183(-6)? (STDERR)     at promise.then (packages/server-render/server.js:28:36)
W20191201-08:43:19.184(-6)? (STDERR)     at C:\Users\AjitGoel\AppData\Local\.meteor\packages\promise\0.11.2\npm\node_modules\meteor-promise\fiber_pool.js:43:40

EventBus 导出为 const 时的错误堆栈:

W20191201-09:00:30.295(-6)? (STDERR) Error: render function or template not defined in component: MainNavBar
W20191201-09:00:30.298(-6)? (STDERR)     at normalizeRender (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8247:13)
W20191201-09:00:30.299(-6)? (STDERR)     at renderComponentInner (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8397:3)
W20191201-09:00:30.300(-6)? (STDERR)     at renderComponent (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8368:5)
W20191201-09:00:30.301(-6)? (STDERR)     at RenderContext.renderNode (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8279:5)
W20191201-09:00:30.302(-6)? (STDERR)     at RenderContext.next (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:2598:23)
W20191201-09:00:30.303(-6)? (STDERR)     at cachedWrite (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:2451:9)
W20191201-09:00:30.303(-6)? (STDERR)     at renderElement (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8529:5)
W20191201-09:00:30.304(-6)? (STDERR)     at renderNode (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8281:5)
W20191201-09:00:30.305(-6)? (STDERR)     at resolve (C:\Users\AjitGoel\AppData\Local\.meteor\packages\akryum_vue-ssr\0.4.0\npm\node_modules\vue-server-renderer\build.dev.js:8406:5)
W20191201-09:00:30.306(-6)? (STDERR)     at C:\Users\AjitGoel\AppData\Local\.meteor\packages\promise\0.11.2\npm\node_modules\meteor-promise\fiber_pool.js:43:40

Answer 1

你有没有考虑过:

import EventBus from './EventBus.js';

由于您正在导出为默认导出。