Vue3中如何让程序化添加的组件访问全局Vue实例

你当前的写法存在两个核心错误：

• 直接通过render函数渲染的vnode默认没有绑定当前项目Vue应用的全局上下文，因此无法访问$store、$router、全局注册的组件/指令等全局挂载的内容
• 你调用的vnode.type.methods.show是组件定义对象上的原始方法，没有绑定组件挂载后的实例上下文，自然无法触发响应式数据更新，也拿不到$refs上的DOM引用。

Vue3中程序化渲染组件的核心是给vnode绑定当前应用的全局上下文，并且从渲染完成的vnode上获取真实组件实例再调用方法，分两种常见场景处理：

场景1：在Vue组件内部调用（比如setup钩子、组件方法中） #

直接通过getCurrentInstance获取当前应用上下文即可，示例代码：

import { h, render, getCurrentInstance } from "vue";
import MyComponent from "./MyComponent.vue";

// 获取当前组件实例，提取全局应用上下文
const currentInstance = getCurrentInstance();
const vnode = h(MyComponent);
// 绑定全局上下文，和模板渲染的环境完全一致
vnode.appContext = currentInstance.appContext;

// 创建DOM容器并挂载
const container = document.createElement("div");
document.body.appendChild(container);
render(vnode, container);

// 从渲染后的vnode上获取组件代理实例，再调用方法
const myComponentRef = vnode.component.proxy;
// 此时调用show方法，数据更新、$refs访问都正常
myComponentRef.show("传入的测试消息");

场景2：在独立的JS/TS工具文件中调用 #

需要先在应用入口导出创建好的app实例，再取其上下文绑定给vnode：

1. 首先在应用入口文件（通常是main.js/main.ts）导出app实例：

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";

const app = createApp(App);
// 注册插件、全局组件等逻辑
app.use(store);
app.use(router);
app.mount("#app");

// 导出app实例供外部调用
export default app;

2. 在需要程序化渲染组件的文件中使用：

import { h, render } from "vue";
import MyComponent from "./MyComponent.vue";
import app from "./main.js";

const vnode = h(MyComponent);
// 绑定应用全局上下文
vnode.appContext = app._context;

const container = document.createElement("div");
document.body.appendChild(container);
render(vnode, container);

// 获取组件实例调用方法
const myComponentRef = vnode.component.proxy;
myComponentRef.show("传入的测试消息");

• 销毁组件时直接执行render(null, container)，再将container元素从DOM中移除即可，不会造成内存泄漏
• 该方案渲染的组件和模板中直接写<MyComponent />的效果完全一致，所有全局依赖、响应式逻辑、生命周期、ref引用都能正常工作
• 禁止直接访问vnode.type上的原始配置方法，这类方法未绑定组件实例上下文，调用后必然出现数据不更新、实例属性不存在的问题

内容的提问来源于stack exchange，提问作者Olaf