请教如何实现动态加载模板字符串类型的组件？

[GunhouWong]

我们有个需求，在后台页面编辑器编写vue组件，组件代码持久化到数据库，Vue前端通过请求获取组件定义代码字符串，在需要的时候异步渲染组件。（组件不在前端项目中一起被构建）。其中组件和数量都是配置的。
请大佬们给个方向？感谢。

[liulinboyi]

异步组件
https://cn.vuejs.org/guide/components/async.html#basic-usage

[GunhouWong]

defineAsyncComponent 参数中需要提供一个组件加载函数，这个函数如何把从服务器获取到的模板语法（.vue）的字符串转成组件对象呢？

[GunhouWong]

仔细了解一下，应该属于动态编译的问题，从服务器获取的代码需要编译才能运行。目前是否有比较好的解决方案呢？

[liulinboyi]

仔细了解一下，应该属于动态编译的问题，从服务器获取的代码需要编译才能运行。目前是否有比较好的解决方案呢？

可以去看https://github.com/vuejs/repl/blob/main/src/transform.ts 这个仓库，https://sfc.vuejs.org/ 就是基于这个仓库做的，这个需求，所有的工具如何使用都在这个repl仓库里。

[liulinboyi]

defineAsyncComponent 参数中需要提供一个组件加载函数，这个函数如何把从服务器获取到的模板语法（.vue）的字符串转成组件对象呢？

@waitingHao 可以看这个https://github.com/liulinboyi/Use-VueRepl 仓库是如何使用repl解析转化*.vue文件。

[zhenzhenChange]

你要动态编译就需要引入Vue的@vue/runtime相关的包去编译。

[edison1105]

• import { compile } from '@vue/compiler-dom'
• 从接口返回的字符串中
  • 提取 template，使用 compile 将其编译成render函数 (render)
  • 提取 script 标签中的内容，将其转成 JavaScript Object (sfc)
  • 将上面两步的结果合并：sfc.render = render
• sfc 已经是个组件了, 将 sfc 注册到页面，就能用了。

[Jinnrry]

• render

请问一下，第二步怎么把script标签内容转换成sfc呢？ 直接eval执行吗？这返回的也不是对象吧？

[Linjiahao666]

将script的内容改成window.xxx= {} ，然后创建一个script元素，内容就是修改之后的script文本，加到界面上，通过window就能访问到了

[yangzhenfeng1994]

您好，我们最近也遇到了这个问题，请问实现了吗？

[Jinnrry]

请问实现了吗？同样遇到这个问题，跟你的需求基本上也一样