vue 动态组件的传参问题

Question

vue构建的前端项目中有一个动态组件,我想将eventBus传给被加载的组件.
eventBus 是 在grandFather组件中直接 provide的.

// grandFather.vue
import {EventBus} from './eventBus.js'

provide () {  
  return {  
  eventBus: this.eventBus,  
  }  
}

data:(){
  return {
  eventBus:new EventBus()
  }
}

同时在mixins.js中插入

// mixins.js

inject:['eventBus']

// parent.vue

// 所有的动态组件是在一个扩展包appExts里的
import exts from 'appExts'
import Vue from 'vue'
import {eventBusMixin} from './mixins.js' 
const components = exts.components

// eventBus 是 mixin进来的
mixins:[eventBusMixin]

<component  
  ref="children"  
  :is="component.componentType"  
  :component="component"  
  :eventBus="eventBus"  
  \>  
</component>

// 全局注册了所有组件
components.forEach(item => {
 Vue.component(item.name,item.component)
})

问题:

1.传入动态加载的子组件的eventBus实例"好像"不是 grandFather 组件中的同一个,eventBus中的监听方法是空的(实际是有的);
在 parent.vue 的 created 生命周期中直接打印 eventBus.listenrs 是空的;但是设置延迟比如1秒的延迟之后再打印就有了.
所以说好像不是同一个,似乎是在渲染子组件的时候eventBus还没初始化,所以传了个空的进去.

2.如果是上述原因,有没有办法将已经初始化完的eventBus传入子组件?如果不是这个原因有没有办法将 grandFather 中的同一个eventBus 实例传入该动态加载的子组件?

3.发现问题是因为eventBus中的listenrs还未初始化时,组件已经加载完毕了,所以传入子组件的eventBus中没有listenrs.这个初始化方法是异步的,有没有办法在注册子组件时将这个eventBus传入,或者等他加载完才传入.(组件渲染)

目前自己想到了一个:在子组件中加个监听,直到eventBus.listeners中有值才执行emit方法.

谢谢!

Answer 1

发现问题并不是参数没传入进去,而是异步导致的问题,异步导致子组件渲染完成时,eventBus中的监听方法还没初始化完成.
解决方法使用了一个v-if在子组件上,判断eventBus.listeners的初始化方法执行完毕了才渲染子组件就没问题了.