微信官方给出三种组件通信方式:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6
只有父组件获取子组件示例对象操作,可以通过监听事件传回调函数参数,实现子主键使用父组件实例对象操作
组件间通信
组件间的基本通信方式有以下几种。
- WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
- 事件:用于子组件向父组件传递数据,可以传递任意数据。
- 如果以上两种方式不足以满足需要,父组件还可以通过
this.selectComponent
方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
1、父组件声明监听事件执行方法
TopEvent(e){ e.detail.bc(this); },
2、给子组件设置监听事件
<component-test bind:e_TopEvent="TopEvent" />
3、子组件触发监听,实现操作父组件实例对象
//子组件向最上级父组件执行对最上级父组件对象的操作 triggerTopEvent(bc){ if(this.data.isTop){ bc(this); }else{ this.triggerEvent('e_TopEvent', { bc:bc, }, { bubbles: true, composed: true }); } }, //调用 var that=this; this.triggerTopEvent(function(top){ top.data.imgList[n.attrs.i]= n.attrs['original-src'] || n.attrs.src; top.setData({imgList:top.data.imgList}); that.setData({imgList:top.data.imgList}); });