小程序开放平台

文档中心
起步
目录
配置小程序
小程序框架
小程序运行时
自定义组件
自定义组件
组件模板和样式
组件构造器
组件间通信与事件
组件生命周期
组件行为
数据监听器
自定义组件扩展
开发第三方自定义组件
基础能力
开放能力
性能优化
转发
事件回调
基础库
调试
数据分析
服务端调试

组件间通信与事件

开发
>
指南
>
自定义组件
>
组件间通信与事件
>
更新时间:2024-11-28 14:21:16

组件间通信

组件间的基本通信方式有以下几种。

  • XHSML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据。具体在 组件模板和样式 章节中介绍。
  • 事件:用于子组件向父组件传递数据,可以传递任意数据。
  • 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。

监听事件

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。关于事件的基本概念和用法,参见 事件

监听自定义组件事件的方法与监听基础组件事件的方法完全一致:

<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

触发事件

自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项:

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象,提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail)
    }
  }
})

获取组件实例

暂不支持