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

臣妾没空2026-02-10 16:04

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

动态组件开发

动态组件开发 的核心思想是将 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">

js 复制代码

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
};

最终实现效果：