優(yōu)維低代碼技術(shù)專欄，是一個全新的、技術(shù)為主的專欄，由優(yōu)維技術(shù)委員會成員執(zhí)筆，基于優(yōu)維7年低代碼技術(shù)研發(fā)及運維成果，主要介紹低代碼相關(guān)的技術(shù)原理及架構(gòu)邏輯，目的是給廣大運維人提供一個技術(shù)交流與學(xué)習(xí)的平臺。

優(yōu)維低代碼實踐連載第14期

《自定義模板》

▽

一、概述

構(gòu)件是我們的頁面最基礎(chǔ)的單元，不同構(gòu)件的組合和搭配形成了頁面的交互。當(dāng)我們的不同頁面想要復(fù)用相同的模塊時?？蓮?fù)用性就是自定義模板誕生的背景，它可以將一套構(gòu)件組合封裝成一個新的可復(fù)用的單元，然后像普通構(gòu)件那樣使用。

二、模板的使用

2.1 代理的設(shè)置

模板的詳情解析可查看「自定義模板詳解」本篇著重講解模板在我們我們低代碼平臺的使用， 我們的 visual-builder 平臺有管理模板的專屬頁面，它跟我們編排的普通頁面的界面是類似的，本質(zhì)上都是組合不同構(gòu)件。

模板也跟構(gòu)件一樣具有屬性，方法，事件，插槽，不同的是它們只是代理其內(nèi)部構(gòu)件用的，模板只是起到封裝的容器作用，我們具體看下模板代理的配置項，我們以小產(chǎn)品 「FIRST-APP-LESSON-4」中 「tpl-task-form」 為例子。

上面是一個添加任務(wù)表單項封裝為一個模板的例子，我們能看到該模板代理了事件（events）和方法（methods），同樣如果要代理屬性和插槽的話配置如下所示：

# 該示例為代理 form 中 values 屬性和 form 中的 items 插槽properties: values: # 代理后的新屬性名稱 ref: form refProperty: valuesslots: items: # 代理后的新插槽名稱 ref: form refSlot: items # 被代理的插槽# 配置好后，該模板的就跟普通構(gòu)件的使用方式一樣，當(dāng)添加 tpl-task-form 的構(gòu)件后，該模板的屬性和方法等就是上面定義的新屬性和新方法

2.2 State

state 為模板級別的數(shù)據(jù)變量，它跟 Context 上下文的數(shù)據(jù)一樣，不同的是 context 類似我們的全局變量，作用域是整個路由，而 State 能控制在模板實例的作用域下，數(shù)據(jù)封裝在模板內(nèi)部、外部不可訪問，同時一個模板的多個實例之間的數(shù)據(jù)互不影響。我們同樣看下 「tpl-task-form」這個模板定義了哪些 state 數(shù)據(jù)：

我們再看這些變量對應(yīng)的使用方式：

2.3 模板預(yù)覽

我們開發(fā)模板也是支持實時預(yù)覽的，面板的中間區(qū)域就是我們預(yù)覽區(qū)，當(dāng)我們需要調(diào)試時，我們可以根據(jù)模板的定義的 state 編輯不同的輸入?yún)?shù)。

上面說完了模板的整個定義流程，我們再看下模板最終的使用效果，同樣拿 「tpl-task-form」這個模板示例：

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