小程序自定义组件——组件间通信与事件

组件间通信

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

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

监听事件

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

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

示例代码:

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

触发事件</

### 微信小程序自定义组件间的数据传递 #### 父组件向子组件传值 在微信小程序中,父组件可以通过属性的方式给子组件传递数据。具体来说,在父组件的WXML文件中引入子组件并设置其属性: ```xml <custom-component myProperty="{{parentValue}}"></custom-component> ``` 这里`myProperty`是子组件接受的一个外部参数名称,而`{{parentValue}}`则是来自父组件的数据。 为了使子组件能够接收这些属性,需在其对应的JS文件内声明该字段。通过`properties`对象来完成配置[^1]: ```javascript Component({ properties: { myProperty: String // 或者其他类型如Number, Boolean等 } }) ``` #### 子组件向父组件反馈事件数据 对于从子到父方向上的通信,则依赖于触发特定事件的方法——即利用`this.triggerEvent()`函数发送消息回父级组件。此过程涉及两个方面的工作:一是在子组件内部编写相应逻辑;二是确保父组件能监听到来自子组件的通知。 ##### 子组件部分 每当希望通知父组件某些状态变化时,可在适当位置调用如下代码片段: ```javascript this.triggerEvent('eventName', { detailData }) // eventName应替换为实际使用的事件名 ``` 其中`detailData`代表想要传输的具体信息体。值得注意的是,按照最佳实践建议,这里的键应当命名为带有`Detail`后缀的形式以便区分普通变量[^3]。 ##### 父组件部分 为了让上述机制生效,还需要修改父页面模板结构以包含对目标事件处理器的支持: ```xml <custom-component bind(eventName)="handleCustomEvent"></custom-component> ``` 接着,在关联的小程序脚本里实现处理回调: ```javascript Page({ handleCustomEvent(event){ const valueFromChild = event.detail; console.log(valueFromChild); } }) ``` 这样就完成了整个闭环操作流程的设计思路说明[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值