在组件中嵌入

使用场景：一般在使用自定义组件时需要嵌入低代码设计配置时使用 如：自定义用户详情页面时嵌入用户订单列表页订单详情页等其他已配置好的页面时。

第一种方法：使用指定文件嵌入

在组件中嵌入 index.preview.vue 组件，指定文件id和版本号即可。

<!-- 组件 -->
<DesignerPreview ref="designerRef" :file-id="fileId" :version="version" :params="params"/>

// 导入组件
import DesignerPreview from './index.preview.vue'

// ref 引用
const designerRef = ref<InstanceType<typeof DesignerPreview>>()

第二种方法：嵌入导出的JSON配置

通过设计器导出数据，导出低代码页面配置JSON, 使用 index.preview.vue 组件，指定配置JSON即可。pageData.json 文件内容为导出的JSON数据。

<!-- 组件 -->
<DesignerPreview ref="designerRef" :editor-data="dataJson" :params="params"/>

// 导入组件
import DesignerPreview from './index.preview.vue'
import dataJson from './data.json'

// ref 引用
const designerRef = ref<InstanceType<typeof DesignerPreview>>()