問題描述

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;
}

親測可以