父页交互
组件有自己的 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" }。
自定义组件
{
"component": true,
"id": "filter",
"body": [
{
"type": "search",
"name": "q",
"hint": "搜任务名",
"onChange": "onInput"
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "tag",
"text": "全部",
"onTap": "pickAll",
"style": {
"background": "{{allBg}}",
"color": "{{allColor}}"
}
},
{
"type": "tag",
"text": "进行中",
"onTap": "pickRun",
"style": {
"background": "{{runBg}}",
"color": "{{runColor}}"
}
},
{
"type": "tag",
"text": "已完成",
"onTap": "pickDone",
"style": {
"background": "{{doneBg}}",
"color": "{{doneColor}}"
}
}
]
},
{
"type": "notice",
"text": "当前筛选：{{label}}"
}
]
}当前页面
{
"title": {
"text": "事件：筛选条",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "filter",
"id": "bar",
"onChange": "onFilter"
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "任务 {{count}} 条",
"style": {
"fontWeight": "bold"
}
},
{
"type": "list",
"bind": "list",
"empty": "没有匹配的任务",
"item": {
"type": "card",
"children": [
{
"type": "text",
"text": "{{item.title}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "tag",
"text": "{{item.user}}"
},
{
"type": "tag",
"text": "{{item.status}}"
}
]
}
]
}
}
]
}事件
全部进行中已完成
当前筛选：全部
任务 4 条
关注达人
运营A进行中
点赞评论
运营B已完成
私信回访
运营A进行中
采集笔记
运营C已完成
数据
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）。
自定义组件
{
"component": true,
"id": "choose",
"body": [
{
"type": "notice",
"text": "父页可以用 params 灌入，也可以 selectComponent 读写。"
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "tag",
"text": "美食",
"onTap": "pickFood",
"style": {
"background": "{{foodBg}}",
"color": "{{foodColor}}"
}
},
{
"type": "tag",
"text": "探店",
"onTap": "pickShop",
"style": {
"background": "{{shopBg}}",
"color": "{{shopColor}}"
}
},
{
"type": "tag",
"text": "直播",
"onTap": "pickLive",
"style": {
"background": "{{liveBg}}",
"color": "{{liveColor}}"
}
}
]
},
{
"type": "input",
"name": "keyword",
"label": "关键词",
"hint": "例如：美食"
},
{
"type": "button",
"text": "确定回传",
"onTap": "onOk"
}
]
}当前页面
{
"title": {
"text": "数据：读写组件",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "choose",
"id": "field",
"params": {
"keyword": "{{seed}}"
},
"onConfirm": "onPicked"
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "父页种子",
"style": {
"fontWeight": "bold"
}
},
{
"type": "input",
"name": "seed",
"label": "传给组件的 keyword",
"hint": "打开页时带入"
},
{
"type": "notice",
"text": "回读 / 回传结果：{{readout}}"
}
]
},
{
"type": "row",
"style": {
"gap": 6
},
"children": [
{
"type": "button",
"text": "写入探店",
"size": "sm",
"onTap": "onWrite",
"style": {
"weight": 1
}
},
{
"type": "button",
"text": "读取当前",
"size": "sm",
"onTap": "onRead",
"style": {
"weight": 1
}
},
{
"type": "button",
"text": "代点确定",
"size": "sm",
"onTap": "onCall",
"style": {
"weight": 1
}
}
]
}
]
}数据
父页可以用 params 灌入，也可以 selectComponent 读写。
美食探店直播
父页种子
回读 / 回传结果：还没有操作
右侧预览：上面是 choose 组件，下面是当前页；父页 body 里有 { "type": "choose", "id": "field" }。改「父页种子」只影响下一次 created（本页已创建过就不再灌）。点「写入探店」立刻改组件输入框；「读取当前」把组件 data 写到结果里；「代点确定」等于在组件里点「确定回传」。