全栈里程碑四：动态组件开发

文档知识来源：抖音 “哲玄前端”，《大前端全栈实践课》

动态组件开发

动态组件开发​ 的核心思想是将 UI 组件​ 和 业务逻辑​ 解耦，通过配置驱动的方式实现快速开发和高度复用。这种方式特别适合中后台管理系统、低代码平台、可视化搭建等场景。

以 createForm 为例， 在model.js--也就是配置化文件中，配置能力；

componentConfig:{ createForm:{ title:'新增商品', saveBtnText:'新增商品' }, editForm:{ mainKey:'product_id', title:'修改商品', saveBtnText:'修改商品' }, detailPanel:{ mainKey:'product_id', title:'商品详情', }, demoComponent:{} }

在组件schema-view.vue 中实现动态渲染 <component v-for="(item,key) in components" :key="key" :is="ComponentConfig[key]?.component" ref="comListRef" @command="onComponentCommand">

import createForm from "./create-form/create-form.vue";
import editForm from "./edit-Form/edit-Form.vue";
import detailPanel from "./detail-panel/detail-panel.vue";

// 业务扩展 component 配置
import BusinessComponentConfig from '$businessComponentConfig';

const ComponentConfig =  {
    createForm:{
        component: createForm
    },
    editForm:{
        component:editForm
    },
    detailPanel:{
        component:detailPanel
    }
}

export default {
    ...ComponentConfig,
    ...BusinessComponentConfig
}; 

最终实现效果：