OctoberCMS-8-組件

scq000 發布于2019-07-01 10:08 / 1807人閱讀

摘要：組件是可以配置的構建元素。可以附加到頁面布局部件中。組件是的核心特性。每個組件都可以對網站的功能進行擴展。組件可以在頁面上輸出代碼，但是這不是主要的，組件的一個重要功能是處理請求處理表單提交回調，處理頁面執行周期。

Components

Components這里我們稱之為組件。

組件是可以配置的構建元素。可以附加到Pages（頁面）、Layouts（布局）、Partials（部件）中。組件是October的核心特性。每個組件都可以對網站的功能進行擴展。組件可以在頁面上輸出HTML代碼，但是這不是主要的，組件的一個重要功能是處理Ajax請求、處理表單提交回調，處理頁面執行周期。允許向頁面注入變量或者實現網站安全性。

介紹

啟用組件，如果是后端管理系統中，可以選擇組件面板，將組件拖動添加到頁面、部件和布局中。如果是采用文本編輯模式，則可以將組件的對應模板的名稱添加到對應的模板的配置部分。比如：下面的例子演示了如何將todolist組件添加到頁面中。

title = "Components demonstration"
url = "/components"

[demoTodo]
maxItems = 20
==
...

當您引用Components時，它會自動創建一個與Components名稱匹配的Page變量（在前面的示例中為demoTodo）。提供HTML標記的Components可以使用標記在Page上呈現{% component %}，如下所示：

{% component "demoTodo" %}

如果具有相同名稱的兩個組件分配給Page和Layout，Page中的組件將覆蓋布局中的組件。

組件的別名

如果有兩個注冊Components的名稱相同，則可以使用完全限定的名稱引用組件，并為其指定一個別名：

[OctoberDemoComponentsTodo demoTodoAlias]
maxItems = 20

第一個參數是類名，第二個參數是注入到Page時使用的組件的別名。如果您指定了組件的別名，那么在引用組件時，可以頁面代碼中的任何地方使用。下一個示例引用Components別名：

{% component "demoTodoAlias" %}

允許給同一個組件定義多個別名，以實現在同一個頁面上使用一個組件的多個實例。

[demoTodo todoA]
maxItems = 10
[demoTodo todoB]
maxItems = 20

組件使用外部屬性值

默認情況下，屬性值在定義組件的配置部分會進行初始化，這時候屬性值是靜態的，如下所示：

[demoTodo]
maxItems = 20
==
...

不過有一個辦法可以使用外部的參數為組件屬性進行初始化。可以是URL參數，Partial部件參數。使用{{ paramName }}從外部變量加載的值的語法：

[demoTodo]
maxItems = {{ maxItems }}
==
...

假設在上面的示例中，組件 demoTodo 在部件中使用，則部件的變量maxItems**將為組件的變量進行初始化：

{% partial "my-todo-partial" maxItems="10" %}

如果是URL參數，則使用的方式略有不同：使用{{ :paramName }}名稱以冒號（:）開頭的語法

[demoTodo]
maxItems = {{ :maxItems }}
==
...

組件對應的頁面在配置部分，應該具有相應的URL參數定義：

url = "/todo/:maxItems"

在October的后端，您可以使用Inspector工具將外部值分配給Components屬性。在Inspector中，您不需要使用大括號輸入參數名稱。Inspector中的每個字段在右側都有一個圖標，用于打開外部參數名稱編輯器。輸入paramName部分變量或:paramNameURL參數的參數名稱。

自定義默認標記

http://octobercms.com/docs/cm...

后續補充

云服務器 GPU云服務器組件和組件通信排序組件切換組件日歷組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/28850.html

React 深入系列2：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 組件有很多種分類方式，常見的分類方式有函數組件和類組件，無狀態組件和有狀態組件...

fizz 2019-08-22 17:26 評論0 收藏0
React 深入系列２：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列2：組件分類 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使...

Karrdy 2019-08-22 16:05 評論0 收藏0
Vue組件基礎與通信

摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。 Vue組件基礎與通信一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的...

I_Am 2019-08-26 10:48 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

zsirfs 2019-08-01 17:51 評論0 收藏0