问题描述

vue3 中，通过 createVNode 创建子组件实例时，发现子组件无法获取到父组件中的 router、store 信息，一旦子组件使用就会报错。

问题原因

通过控制台断点调试，发现时 appContext 值为空导致的。怀疑是创建子组件的时候，没有将父组件中的上下文传递过去。

源码：

/*** 初始化容器* @param app {App}* @param options {Partial<OptionsProps>}*/
function renderContainer(app:App, options: Partial<OptionsProps>) {const vnode = createVNode(options.container);// const box = <HTMLElement>document.createElement('div');render(vnode, document.body);// document.body.appendChild(box);const vm = <ComponentInternalInstance>vnode.component;containerRef = vm.exposed?.reference;
}

解决方案

,需要将父组件中的context，传递给子组件中

// 代码块
vnode.appContext = app._context;

修改后的代码

/*** 初始化容器* @param app {App}* @param options {Partial<OptionsProps>}*/
function renderContainer(app:App, options: Partial<OptionsProps>) {const vnode = createVNode(options.container);if (app._context) {vnode.appContext = app._context;}// const box = <HTMLElement>document.createElement('div');render(vnode, document.body);// document.body.appendChild(box);const vm = <ComponentInternalInstance>vnode.component;containerRef = vm.exposed?.reference;
}

亲测可以