OctoberCMS-8-组件

scq000 发布于2019-07-01 10:08 / 1802人阅读

摘要：组件是可以配置的构建元素。可以附加到页面布局部件中。组件是的核心特性。每个组件都可以对网站的功能进行扩展。组件可以在页面上输出代码，但是这不是主要的，组件的一个重要功能是处理请求处理表单提交回调，处理页面执行周期。

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云服务器云服务器组件和组件通信排序组件切换组件日历组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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