Skip to content

父页交互 ​

组件有自己的 data,和父页隔离。父页不能直接写 组件.this.data,组件也读不到父页变量。来回只有三条路:

  1. 父 → 子:节点上的 params,进 created(props)
  2. 子 → 父:this.triggerEvent(name, detail),父节点写 onXxx
  3. 父读写子: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 写到结果里;「代点确定」等于在组件里点「确定回传」。