優維低代碼技術專欄，是一個全新的、技術為主的專欄，由優維技術委員會成員執筆，基于優維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」這個模板示例：

最終我們完成了模板的創建，定義和使用，掌握了模板這個技能，我們可以把很多復雜的場景簡化為一個個小模塊然后再組裝，這對于降低開發復雜度是一個很好的助手。