占位符语法

占位符是把 JS 数据塞进组件的桥。语法非常简单:用 ${...} 包住一个变量名或路径。

提示

旧的 {...} 写法仍兼容,保存时会自动规范化为 ${...}。新模板建议统一写 ${...}。

基础:`${变量名}`

JS 里写:

this.title = "你好"
this.count = 42

组件内容字段写:

${title}      → 显示: 你好
你有 ${count} 条新消息  → 显示: 你有 42 条新消息

如果你的变量是个对象或数组,可以直接用点号 / 方括号深入访问:

this.user = {
  name: "Alice",
  badges: ["VIP", "新人"]
}

${user.name}        → Alice
${user.badges[0]}   → VIP

支持任意嵌套:${a.b[0].c.d} 都能解析。

这是新功能

旧版本必须写 ${$.user.name},有了这个之后,无前缀也能直接点号路径了。

$. 前缀的意思是"绕过循环作用域,从最外层全局查"。日常你用不到,只有写循环的时候,循环内变量名和外面的全局变量名撞了才需要它。

this.row = "外面的"
this.list = [{ name: "A" }, { name: "B" }]

循环内:
  ${row}     → 当前循环项,比如 {name:"A"}
  ${$.row}   → "外面的"   ← 强制读全局

只有在 loop / vstack / hstack 等容器的"循环数据源"字段里才会用这种格式。意思是:遍历某个数组,每一项命名为某个变量,然后子组件就能用这个变量。

this.rows = [
  { title: "苹果", price: 5 },
  { title: "香蕉", price: 3 }
]

容器的循环数据源字段填:

${rows[row]}

意思是 — 遍历 rows,每一项叫 row。然后子组件里就能写:

${row.title}    → 苹果 / 香蕉
${row.price}    → 5 / 3

嵌套循环也支持:

外层数据源: ${rows[row]}
内层数据源: ${row.cells[cell]}    ← 用上一层的 row 的 cells 字段
内层组件:   ${cell.text}