如何从需返回DOM元素/React组件的函数中返回Vue组件？

要在renderCustomComponent中渲染带属性的Vue组件，你可以使用Vue 3提供的手动挂载API（createVNode和render），具体实现如下：

1. 导入必要依赖 #

先导入Vue核心API和你的MyGreeting组件：

import { createVNode, render } from 'vue';
import MyGreeting from './MyGreeting.vue';

2. 直接返回组件DOM元素 #

如果需要直接返回组件对应的DOM元素，代码如下：

const renderCustomComponent = () => {
  // 创建组件虚拟节点，传入目标props
  const vnode = createVNode(MyGreeting, { greeting: 'Hello Vue!' });
  // 创建临时容器用于渲染组件
  const container = document.createElement('div');
  // 将虚拟节点渲染到容器中
  render(vnode, container);
  // 返回组件渲染后的根DOM元素
  return container.firstElementChild;
};

3. 挂载到自定义div容器中 #

如果需要把组件包裹在你创建的parent div里，可采用以下写法：

const renderCustomComponent = () => {
  const parent = document.createElement('div');
  // 创建组件虚拟节点并传入props
  const vnode = createVNode(MyGreeting, { greeting: 'Hi there!' });
  // 将组件渲染到parent容器内
  render(vnode, parent);
  return parent;
};

注意事项 #

• 若第三方SDK会频繁调用该函数或动态销毁组件，记得在组件不再使用时调用render(null, container)卸载组件，避免内存泄漏。
• 以上方案基于Vue 3，若你使用Vue 2，需改用new Vue({ ... }).$mount(container)的方式实现。

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