父页交互
组件有自己的 data,和父页隔离。父页不能直接写 组件.this.data,组件也读不到父页变量。来回只有三条路:
- 父 → 子:节点上的
params,进created(props) - 子 → 父:
this.triggerEvent(name, detail),父节点写onXxx - 父读写子:
this.selectComponent(id)得到{ data, setData, call }
文件和 type 写法见 组件结构。生命周期见 组件生命周期。
事件
组件里抛事件:
javascript
this.triggerEvent('confirm', { keyword: this.data.keyword });
this.triggerEvent('change', { q: this.data.q, tab: this.data.tab });父节点用 on + 首字母大写承接。confirm → onConfirm,change → onChange。也认 bindConfirm / bind:confirm。
json
{ "type": "filter", "id": "bar", "onChange": "onFilter" }父页收到的是 { type, detail }:
javascript
onFilter(e) {
var q = e.detail.q;
var tab = e.detail.tab;
}下面这个筛选条会 triggerEvent('change')。父页用 e.detail 过滤任务列表。上面是 filter 组件,下面是当前页;父页 body 里有 { "type": "filter", "id": "bar", "onChange": "onFilter" }。
数据
params 在创建时传一次,字符串会做 {{path}} 替换。之后父页改自己的字段,不会自动再灌进组件。运行中要改组件,用 selectComponent。
javascript
var c = this.selectComponent('field');
c.setData({ keyword: '探店' });
var keyword = c.data.keyword;
c.call('onOk');| 方法 | 说明 |
|---|---|
selectComponent(id) | 按节点 id 找子组件。找不到返回 null |
c.data | 只读当前组件数据 |
c.setData(patch) | 写入组件,触发组件重绘 |
c.call(name, arg) | 调组件上的方法,例如 onOk |
找不到时不要调用。id 不写则用组件 id(如 choose)。
右侧预览:上面是 choose 组件,下面是当前页;父页 body 里有 { "type": "choose", "id": "field" }。改「父页种子」只影响下一次 created(本页已创建过就不再灌)。点「写入探店」立刻改组件输入框;「读取当前」把组件 data 写到结果里;「代点确定」等于在组件里点「确定回传」。
