开发者社区> 问答> 正文

vue 动态组件的传参问题

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"
>

// 全局注册了所有组件 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方法.

谢谢!

展开
收起
问问小秘 2020-01-09 18:29:37 2632 0
1 条回答
写回答
取消 提交回答
  • 发现问题并不是参数没传入进去,而是异步导致的问题,异步导致子组件渲染完成时,eventBus中的监听方法还没初始化完成. 解决方法使用了一个v-if在子组件上,判断eventBus.listeners的初始化方法执行完毕了才渲染子组件就没问题了.

    2020-01-09 18:31:20
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载
Vue.js在前端服务化上的实践与探索 立即下载