【nuxt3】cannot read preperties of null (reading ‘$nuxt‘)

问题描述

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

问题原因

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

源码：

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

亲测可以