做煤网站,中国建造师官方网站,电子商务网站的设计要求,手机百度app下载安装优维低代码技术专栏#xff0c;是一个全新的、技术为主的专栏#xff0c;由优维技术委员会成员执笔#xff0c;基于优维7年低代码技术研发及运维成果#xff0c;主要介绍低代码相关的技术原理及架构逻辑#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。
优维… 优维低代码技术专栏是一个全新的、技术为主的专栏由优维技术委员会成员执笔基于优维7年低代码技术研发及运维成果主要介绍低代码相关的技术原理及架构逻辑目的是给广大运维人提供一个技术交流与学习的平台。
优维低代码实践连载第14期
《自定义模板》
▽
一、概述
构件是我们的页面最基础的单元不同构件的组合和搭配形成了页面的交互。当我们的不同页面想要复用相同的模块时。可复用性就是自定义模板诞生的背景它可以将一套构件组合封装成一个新的可复用的单元然后像普通构件那样使用。
二、模板的使用
2.1 代理的设置
模板的详情解析可查看「自定义模板详解」本篇着重讲解模板在我们我们低代码平台的使用 我们的 visual-builder 平台有管理模板的专属页面它跟我们编排的普通页面的界面是类似的本质上都是组合不同构件。
模板也跟构件一样具有属性方法事件插槽不同的是它们只是代理其内部构件用的模板只是起到封装的容器作用我们具体看下模板代理的配置项我们以小产品 「FIRST-APP-LESSON-4」中 「tpl-task-form」 为例子。 上面是一个添加任务表单项封装为一个模板的例子我们能看到该模板代理了事件events和方法methods同样如果要代理属性和插槽的话配置如下所示
# 该示例为代理 form 中 values 属性和 form 中的 items 插槽
properties: values: # 代理后的新属性名称 ref: form refProperty: valuesslots: items: # 代理后的新插槽名称 ref: form refSlot: items # 被代理的插槽
# 配置好后该模板的就跟普通构件的使用方式一样当添加 tpl-task-form 的构件后该模板的属性和方法等就是上面定义的新属性和新方法 2.2 State
state 为模板级别的数据变量它跟 Context 上下文的数据一样不同的是 context 类似我们的全局变量作用域是整个路由而 State 能控制在模板实例的作用域下数据封装在模板内部、外部不可访问同时一个模板的多个实例之间的数据互不影响。我们同样看下 「tpl-task-form」这个模板定义了哪些 state 数据 我们再看这些变量对应的使用方式 2.3 模板预览
我们开发模板也是支持实时预览的面板的中间区域就是我们预览区当我们需要调试时我们可以根据模板的定义的 state 编辑不同的输入参数。 上面说完了模板的整个定义流程我们再看下模板最终的使用效果同样拿 「tpl-task-form」这个模板示例 最终我们完成了模板的创建定义和使用掌握了模板这个技能我们可以把很多复杂的场景简化为一个个小模块然后再组装这对于降低开发复杂度是一个很好的助手。
