优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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」这个模板示例：
文章来源：https://www.toymoban.com/news/detail-663608.html
最终我们完成了模板的创建，定义和使用，掌握了模板这个技能，我们可以把很多复杂的场景简化为一个个小模块然后再组装，这对于降低开发复杂度是一个很好的助手。文章来源地址https://www.toymoban.com/news/detail-663608.html
到了这里，关于优维低代码实践：自定义模板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
