Vue组件模板异步定义与编译：动态渲染用户自定义模板求助

我们的应用分为两部分：

• 低代码编辑器：用于定义仪表盘UI配置
• UI渲染端：负责渲染编辑器配置的UI

需求是在低代码编辑器中开放自定义Vue组件的选项，通过socket.io将组件模板字符串传递到UI端并完成渲染。比如收到如下模板字符串时：

<div>{{ myvar }}</div>
<div v-if="myvar">MyVar is true</div>

需要将其作为Vue组件的一部分正常渲染。

目前遇到的问题：

• 使用v-html无法解析Vue的指令（如v-if）和插值语法（{{ }}）
• 尝试过defineComponent、defineAsyncComponent、<component :is="" />等方案，均无法实现预期效果
• 参考过GitHub上的Vue浏览器编辑器项目，仍未理清核心逻辑
• 测试的示例中仅渲染出<!-- -->，本地运行也存在相同问题

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