一、需求理解
前端主要分俩模块,一个是管理模块,一个是展示模块。
管理模块负责传递json数据。 如图1.1,目前只是大概做了一个静态数据传递,先做页面展示。
展示模块负责根据json数据展示页面。如图1.2,根据动态组件和传递json数据展示页面,页面主要有动态表单、动态按钮、动态列表、动态弹窗等。
图1.1 数据传递
图1.2 数据展示
二、设计思路
既然是vue动态生成页面,那么必然绕不开组件,所以就先从动态组件开始写。先写出动态表单,动态按钮,动态列表和动态弹窗的组件。然后再将他们之间的逻辑功能串联起来,这样,前端只需要传递数据,页面本身就可以完成全部的操作。
三、动态组件
主要还是谈一谈动态组件的编写吧。
动态表单
核心代码是 动态组件配置
<component
:is="item.componentType"