变量绑定(数据绑定)
变量绑定把组件的某个属性(如占位文案、是否禁用、选项数据)接到可变数据源上。源数据变化时,属性会同步更新,适合默认值、登录态、远程选项、动态禁用等场景。
界面名称多为 数据绑定。

在哪里找
- 选中组件 → 右侧 属性配置。
- 点击 数据绑定(「设置变量」类入口,以界面为准)。
- 在弹窗左侧配置「属性 = 绑定内容」,右侧从变量树点选插入。
也可在部分属性旁的变量图标中,直接插入单个变量。

与全局变量的关系:全局变量是「可复用的数据资产」;本文是「把变量接到某个组件属性上」。
绑定模式
每一行绑定通常包含:
| 项 | 说明 |
|---|---|
| 属性 | 要驱动的配置项(预设项或自定义键名) |
| 模式 | 变量:直接引用;计算:用函数算出结果 |
| 值 / 表达式 | 变量路径,或计算逻辑 |
变量模式
从右侧变量树点选,或手写路径。常见写法(以界面与环境为准):
| 写法示意 | 含义 |
|---|---|
{{$form.userName}} | 当前表单某字段值 |
{{$cookie.token}} | Cookie 中的 token |
{{$localStorage.theme}} | 本地存储 |
{{$sessionStorage.draftId}} | 会话存储 |
{{$globalData.merchant}} | 环境注入的全局数据 |
{{$var.某全局变量名}} | 全局变量 |
{{cityOptions}} | 环境写入的外部变量名 |
对象可继续取属性,例如 {{$var.user.deptName}};数组可用下标(以编辑器支持为准)。

计算模式
需要加工后再赋给属性时,选「计算」,在编辑器中读取其它变量后返回结果。概念示例:
读取单价与数量,返回金额
单价 = 读取表单.price(空则 0)
数量 = 读取表单.count(空则 0)
返回 单价 × 数量具体函数写法以编辑器模板为准。字段值计算更常用计算公式组件或字段公式。

自定义属性键名
除预设属性外,可添加自定义绑定。绑到组件属性时,键名建议按界面提示的规则,例如:
props.placeholder → 占位文本
props.disabled → 是否禁用
props.clearable → 是否可清除
变量树里有什么
| 分类 | 含义 | 典型用途 |
|---|---|---|
| 当前表单 | 本表各字段值 | 用 A 字段驱动 B 的属性 |
| Cookie | 浏览器 Cookie | token、语言等 |
| localStorage / sessionStorage | 本地 / 会话存储 | 主题、草稿 ID |
| 全局数据 | 环境注入的共享数据 | 商户信息、字典 |
| 全局变量 | 全局变量中定义的计算 / 固定值 | 申请人、开关位 |
| 其它外部变量 | 环境写入的自定义名 | 如选项列表 cityOptions |
先有数据,再绑定
绑定前请确认对应变量在预览 / 运行时已有值。空引用会导致属性不生效或表现异常。
远程请求参数里也可使用同一套 {{变量}} 写法,见全局数据源。
怎么配置(分步)
- 明确:「哪个属性」要随「什么数据」变。
- 打开数据绑定 → 选预设属性,或添加自定义键。
- 选变量模式并点选路径;需要加工则用计算模式。
- 保存后预览:改源数据,看目标属性是否更新。
业务示例
入门:占位文案随语言变量变
属性:占位文本。 绑定:语言相关变量(或配合国际化词条策略)。 切换语言相关数据后,占位同步变化。
入门:选项绑定城市列表
单选 / 下拉的选项数据 ← 外部变量 cityOptions(环境预先写入)。 比在每个字段里维护静态选项更易集中更新。也可配合全局数据源、选项数据。
常用:请求头带 token
远程选项或全局数据源请求参数中使用 {{$cookie.token}} 或全局变量中的 token。 与组件属性绑定是同一套变量体系。
常用:按角色变量禁用字段
全局变量或外部数据给出「是否可编辑金额」。 自定义绑定禁用属性 = 计算:无编辑权则为禁用。 更标准的权限判断见身份与权限。
常用:用表单字段驱动另一字段属性
$form.userType 变化时,通过绑定或计算更新说明字段的占位 / 是否清除等。 若目标是「改字段的值」,优先数据联动;本文侧重「改组件属性」。
常用:事件写入变量,属性再绑定
行为动作「发送请求」把结果存到变量 → 统计栏或下拉选项绑定该变量,实现「查完再展示」。
和其它能力怎么选
| 诉求 | 优先 |
|---|---|
| 改组件属性(占位、禁用、选项…) | 变量绑定(本文) |
| 改字段填写值 | 数据联动 / 事件设值 |
| 可复用的共享计算 | 全局变量 |
| 可复用的选项集 | 全局数据源 |
| 按权限显隐必填 | 身份与权限 + 条件 |
| 算出展示用金额字段 | 计算公式 |
注意点
- 变量路径、大小写需与环境注入一致;不确定时先在变量树点选。
- 计算模式避免循环依赖(A 依赖 B、B 又依赖 A)。
- 敏感信息勿仅靠前端变量做唯一安全控制,权限判断需配合服务端。
- 选项绑定后仍要预览空数据、错误数据两种情况。


