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

时间:2019-12-01 15:06:15

标签: javascript vue.js vue-component

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

我正在尝试使用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导出为常量时的错误堆栈:

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

1 个答案:

答案 0 :(得分:1)

您是否考虑过:

import EventBus from './EventBus.js';

由于您要导出为default export