Joker 智能开发平台-组件状态数据

组件状态数据

本章主要讲解组件中的状态数据，我们可以在这里去维护一个组件的参数约束、内部响应式数据以及内部私有变量。

概述

组件状态数据是组件开发中最为常用的功能之一。

当打开一个组件或页面文件时，工作台左侧菜单中会显示组件数据菜单，点击后即可打开组件数据面板。

从数据使用的角度出发，可将其分为以下几类 输入参数（props）、 响应数据（model）、内部私有属性，接下来我们来详细讲解下这三种数据的用途和如何声明一个属性/参数。

输入参数（props）

这是当前组件所需要的参数。这些参数具有响应式特点，一旦外部使用者传递的参数发生变化，会立即通知并更新组件内部的 DOM 节点。这意味着，组件能够实时响应外部传入数据的变动，从而动态调整自身的显示与行为，大大增强了组件的灵活性与复用性。例如，一个按钮组件可能通过 props 接收按钮的文本内容、颜色等参数，当外部传入的文本或颜色改变时，按钮能立刻呈现相应的变化。

仅在组件类型文件内才会展示传入参数的配置。页面类型的组件不允许配置接受参数。

如何创建/编辑

我们可以在输入参数(props)面板右侧的加号来打开参数创建面板，在创建参数面板中我们可以配置参数的名称、备注、类型、默认值、演示值。属性创建教程，请阅读本章最后属性/参数创建和编辑小结。

如何使用

创建完参数后便可开始使用，下面将从两个角度为您详细介绍：

1. 声明者视角（当前组件）

在完成参数创建后，即可在组件内部使用所创建的参数。这些参数可在布局模板和方法逻辑中使用：

• 布局模板：在模板里，可通过表达式的方式props.引用参数变量。

• 方法逻辑：在逻辑编辑面板中，可通过 this.props. 的方式读取组件参数值。

贴心提示：若您不太熟悉代码编写，无需过度担忧。平台具备智能的数据管理功能，在表达式编辑面板中会提供智能语法提示，同时还设有数据管理面板。您可以在该面板中查看当前节点所使用的所有变量，只需点击即可快速使用相应变量。

2. 使用者视角（其他组件/页面引用当前组件）

当在其他组件或页面中引用当前组件时，点击该组件，即可在组件参数面板中看到已声明的参数。

重要建议：对组件参数进行声明时，务必尽可能完整。建议提供参数说明、交互类型、演示值等信息，以便开发人员能快速了解该属性的用途。

响应数据（model）

这是组件内部的响应数据。在组件装载开始前，该属性会被“劫持”，进而具备数据响应能力。也就是说，当这个内部数据发生改变时，与之相关联的组件部分会自动更新。比如在一个购物车组件中，商品数量作为响应数据，当数量改变时，购物车的总价显示、商品列表的渲染等相关部分会自动更新，为用户提供实时反馈。

如何创建/编辑

我们可以在响应数据（model）面板右侧的加号来打开参数创建面板，在创建属性面板中我们可以配置参数的名称、备注、类型、默认值、演示值。属性创建教程，请阅读本章最后属性/参数创建和编辑小结。

认识响应式数据

在这里，我们借助一个 DEMO 来深入理解什么是响应式数据。响应式数据能够在一个值发生变更后，立即通知监听者。在布局模板里，一旦值有所变更，这种变化也会即刻在页面中实现更新。

我们通过代码定义了一个响应式数据count。当点击页面上的按钮时，count的值会加一，并且值变更后，页面会马上体现出这一变化 。

如何使用

在完成属性创建后，即可在组件内部使用所创建的属性。这些属性可在布局模板和方法逻辑中使用：

• 布局模板：在模板里，可通过表达式的方式model.引用参数变量。

• 方法逻辑：在逻辑编辑面板中，可通过 this.model. 的方式读取组件参数值。

贴心提示：若您不太熟悉代码编写，无需过度担忧。平台具备智能的数据管理功能，在表达式编辑面板中会提供智能语法提示，同时还设有数据管理面板。您可以在该面板中查看当前节点所使用的所有变量，只需点击即可快速使用相应变量。

内部私有属性

这类属性既不支持外部调用，也不具备响应式能力，仅作为组件内部临时使用的变量。在这里，你可以声明内部动态数据变量，方便在多个方法中使用。例如，在一个复杂的表单组件中，可能需要一个临时变量来记录表单填写的步骤状态，这个变量只在组件内部的方法中使用，无需对外暴露，也不需要对其变化做出响应式更新。

如何创建/编辑

我们可以在内部私有属性面板右侧的加号来打开参数创建面板，在创建属性面板中我们可以配置参数的名称、备注、类型、默认值、演示值。属性创建教程，请阅读本章最后属性/参数创建和编辑小结。

它的使用方式与参数、响应数据一致，均可通过表达式的方式直接调用。不过，它与响应式数据不同之处在于，它不具备响应式能力。因此，如果该值在组件运行时会发生变更，那么不建议以私有属性的方式在模板中展现。

通常情况下，我们会在多个逻辑方法中定义一个公用属性，以此完成特定的业务逻辑。由于它不具备响应能力，所以既不会造成额外的性能开销，也不会污染原始数据。

属性/参数创建和编辑

这里我们来讲解一下参数属性的编辑面板的操作流程。（属性和参数的创建面板基本一致，只是存在部分属性的差异，在讲解时我们会特别标注，请仔细阅读。）

第一步（属性基本信息）

• 属性名称：这里需要我们使用英文字母完成属性名的配置，属性名在当前组件功能中需要保持唯一（即在传入参数中唯一/在响应数据中唯一）
• 备注/标题：我们可以为其配置一个标题，标题的配置可以帮我们更快速的了解属性的用途，例如：颜色、尺寸等。
• 提示：我们可以通过提示属性来配置当前属性的详细描述，当我们在使用时，通过鼠标移入可以查看当前属性的详细说明。
• 分类：仅参数需要配置，我们可以在这里配置一个参数的分类，相同的分类在组件属性时会进行分组归类，可以提供使用者更好的体验性。

• 排序：可用于将属性进行排序，值越大在属性面板中越靠前（仅针对输入参数）

第二步（属性类型信息）

• 类型：当前属性的类型。
  1. 字符串（String）
  2. 数字（Number）
  3. 布尔值（Boolean）
  4. 数组（Array）
  5. 对象（Object）
  6. 方法（Function）
  7. 时间（Date）
  8. 任意类型（Any）
• 是否非空：可配置当前值是否允许为空（undefined）。
• 赋值方式：仅参数需要配置，当需要为其设置值时，可通过该属性来决定采用何种交互方式为其赋值。不同的数据类型会有不同的赋值方式可选。
  1. 可选值：可创建 Key - Value 的数据，提供下拉框模式的值选择。
  2. 多行文本：采用长文本输入框，可实现多行文本的输入。
  3. 颜色值：展现为颜色设置控件，可快速完成颜色的配置。
  4. CSS 尺寸值：在这里可以配置 CSS 的尺寸值（带单位）。
  5. 样式名：展示为样式设置控件，可快速查询当前项目中的公开样式，实现快速添加。
  6. 图片资源选择：提供内部静态资源的快速选择交互（图片展示效果）。
  7. 资源选择：提供内部静态资源的快速选择交互。
  8. Style 样式：展现一个可视化的 Style 配置面板，可完成一些常用的样式编辑。
  9. 表达式：默认使用表达式（动态脚本）进行过值配置。
• 默认值：作为参数/属性的默认值，若未配置或未传递值（参数）时，会自动赋值为该默认值。
• 演示值：仅参数需要配置，该属性用于当该组件被引入时，为该属性立即设置一个值，通过演示值可以帮助开发人员在引入组件时有一个更好的首次展示效果，开发人员可以对其修改。

若当前属性类型被配置为：数组/对象时，会在第二步展现深层类型设计面板，我们可以在这里配置对象或数组的内部属性类型。

内部属性设计面板中的要素和上述内容基本一致，可参考上述功能描述。