优维低代码实践：自定义模板

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第14期

《自定义模板》

▽

一、概述

构件是我们的页面最基础的单元，不同构件的组合和搭配形成了页面的交互。当我们的不同页面想要复用相同的模块时。可复用性就是自定义模板诞生的背景，它可以将一套构件组合封装成一个新的可复用的单元，然后像普通构件那样使用。

二、模板的使用

2.1 代理的设置

模板的详情解析可查看「自定义模板详解」本篇着重讲解模板在我们我们低代码平台的使用， 我们的 visual-builder 平台有管理模板的专属页面，它跟我们编排的普通页面的界面是类似的，本质上都是组合不同构件。

模板也跟构件一样具有属性，方法，事件，插槽，不同的是它们只是代理其内部构件用的，模板只是起到封装的容器作用，我们具体看下模板代理的配置项，我们以小产品 「FIRST-APP-LESSON-4」中 「tpl-task-form」 为例子。

上面是一个添加任务表单项封装为一个模板的例子，我们能看到该模板代理了事件（events）和方法（methods），同样如果要代理属性和插槽的话配置如下所示：

# 该示例为代理 form 中 values 属性和 form 中的 items 插槽


properties:
  values: # 代理后的新属性名称
    ref: form
    refProperty: values
slots:
  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」这个模板示例：

最终我们完成了模板的创建，定义和使用，掌握了模板这个技能，我们可以把很多复杂的场景简化为一个个小模块然后再组装，这对于降低开发复杂度是一个很好的助手。