以下是组件间通信与事件的基本介绍：
1. 自定义事件和触发事件：
1.1 在组件中定义自定义事件：
在 Component 构造器的 methods 中定义自定义事件。
// custom-component.js
Component({
methods: {
onTap: function () {
// 触发自定义事件
this.triggerEvent('customTap', { data: 'Hello from Custom Component' });
}
}
});
1.2 在页面中监听事件：
在页面的 WXML 文件中使用组件时，可以监听组件触发的自定义事件。
<!-- page.wxml -->
<custom-component bind:customTap="onCustomTap" />
2. 父子组件通信：
2.1 子组件触发事件：
在子组件中触发自定义事件。
// child-component.js
Component({
methods: {
onTap: function () {
this.triggerEvent('customEvent', { message: 'Hello from Child Component' });
}
}
});
2.2 父组件监听事件：
在父组件的 WXML 文件中监听子组件触发的事件。
<!-- parent-component.wxml -->
<child-component bind:customEvent="onCustomEvent" />
3. 通过 dataset 传递额外数据：
可以通过 dataset 传递额外的数据给监听事件的处理函数。
<!-- page.wxml -->
<custom-component bind:customTap="onCustomTap" data-customdata="Extra Data" />
// page.js
Page({
onCustomTap: function (event) {
console.log('Custom Tap Event', event.detail);
console.log('Extra Data', event.currentTarget.dataset.customdata);
}
});
4. 小程序事件对象：
事件处理函数的参数中包含一个事件对象 event，可以通过 event.detail 获取组件触发事件时传递的数据。
// custom-component.js
Component({
methods: {
onTap: function () {
this.triggerEvent('customTap', { data: 'Hello from Custom Component' });
}
}
});
<!-- page.wxml -->
<custom-component bind:customTap="onCustomTap" />
// page.js
Page({
onCustomTap: function (event) {
console.log('Custom Tap Event', event.detail);
}
});
通过以上方式，你可以实现不同组件之间的通信。父组件监听子组件的事件，子组件触发自定义事件，传递数据给父组件，实现组件之间的信息传递。
转载请注明出处：http://www.zyzy.cn/article/detail/627/微信小程序