Vue3 根据接口返回的信息动态引用组件

主页面需要根据接口返回的信息来确定需要动态引用哪些组件，这里使用 异步组件 defineAsyncComponent 来实现这个功能

HTML部分：

我的需求是要实现缩放和拖拽，并且页面上会有很多组件，所以我使用了 VueDragResizeRotate库 来实现拖拽和缩放功能，并把接口返回的数据存在 componentUrl 中。

如果没有拖拽缩放需求的话，可以将外层标签替换成 div 即可。

如果页面只引用一个组件，可以直接看红色框选的component 动态组件 部分，在 component 上使用 generateDynamicComponent 方法来动态引入组件。

generateDynamicComponent 具体实现：

import 后面的路径根据自己项目的路径，以及接口返回的数据进行调整 。

注意：

我在开发的时候发现，后端只返回了4条数据，应该只展示4个组件，但是这个4个组件一直在重复渲染导致内存溢出，后来发现是后端加数据的时候把主页面当作组件引用了，就导致了主页面引用了主页面，主页面又引用主页面。一直套娃。

所以平时开发的时候，可能不一定是代码有问题，也可能是数据有问题，有时候解决不了的bug可以尝试换一些数据测试。