在微信小程序开发中，组件间的数据传递是一个常见的需求。以下是不同组件间数据传递的方式，根据传递的方向（父子、兄弟、跨层级等）提供了多种方法。
1. 父组件向子组件传递数据
通过 properties（组件属性），父组件可以将数据传递给子组件。
父组件（Page 或父组件的 WXML 和 JS）：
<child-component custom-data="{{parentData}}" />
Page({
data: {
parentData: 'Hello from parent!'
}
});
子组件（child-component 的 JS 文件）：
Component({
properties: {
customData: {
type: String,
value: '' // 默认值
}
},
observers: {
customData(newVal) {
console.log('Received from parent:', newVal);
}
}
});
2. 子组件向父组件传递数据
通过 事件机制，子组件可以向父组件传递数据。
子组件（child-component 的 JS 文件）：
Component({
methods: {
sendDataToParent() {
this.triggerEvent('customEvent', { data: 'Hello from child!' });
}
}
});
父组件（Page 或父组件的 WXML 和 JS）：
<child-component bind:customEvent="handleCustomEvent" />
Page({
handleCustomEvent(e) {
console.log('Received from child:', e.detail.data);
}
});
3. 兄弟组件间的数据传递
兄弟组件无法直接通信，通常通过 父组件中转 或使用 全局状态管理。
方法 1：通过父组件中转
父组件充当兄弟组件的通信桥梁。
- 兄弟组件 A 向父组件触发事件，父组件监听并将数据传递给兄弟组件 B。
方法 2：使用全局状态（见方法 4）
4. 全局状态管理
通过小程序的 全局对象 或 状态管理工具 实现组件间的数据共享。
方法 1：使用全局对象（App 对象）
// app.js
App({
globalData: {
sharedData: 'Shared data'
}
});
在组件中访问：
// 任意组件的 JS 文件
const app = getApp();
console.log(app.globalData.sharedData);
方法 2：使用状态管理工具
如 wx-miniprogram/store 等开源库，提供响应式的状态管理功能。
5. 使用 Page 和 Component 事件系统
如果多个组件在同一个页面，可以利用 页面方法 实现数据共享。
示例：
-
组件 A 向页面发送事件：
Component({ methods: { sendData() { this.triggerEvent('sendToPage', { data: 'Data from A' }); } } }); -
页面接收事件并将数据传递给组件 B：
Page({ data: { dataForB: '' }, handleSendToPage(e) { this.setData({ dataForB: e.detail.data }); } }); -
页面将数据传递给组件 B：
<component-b custom-data="{{dataForB}}" />
6. 自定义 Behavior 实现共享逻辑
Behavior 是一种组件间逻辑复用的方式，多个组件可以通过共享 Behavior 来实现数据共享。
定义 Behavior：
// behaviors/shared-data.js
module.exports = Behavior({
data: {
sharedValue: 'Shared value'
},
methods: {
updateSharedValue(newValue) {
this.setData({ sharedValue: newValue });
}
}
});
使用 Behavior：
// 组件 A
const sharedData = require('behaviors/shared-data.js');
Component({
behaviors: [sharedData],
methods: {
modifySharedValue() {
this.updateSharedValue('New value from A');
}
}
});
// 组件 B
const sharedData = require('behaviors/shared-data.js');
Component({
behaviors: [sharedData],
lifetimes: {
attached() {
console.log('Shared value:', this.data.sharedValue);
}
}
});
7. 微信小程序插件（WeChat Plugin）
如果需要在多个项目间传递数据，可以封装为插件并使用官方提供的 plugin:// 机制。
总结与适用场景
| 方式 | 场景 | 特点 |
|---|---|---|
| Properties | 父传子数据 | 简单直接，单向数据流 |
| 事件机制（triggerEvent） | 子传父数据 | 通过事件触发，适合单层级通信 |
| 父组件中转 | 兄弟组件通信 | 父组件作为中转站，数据共享灵活 |
| 全局状态管理 | 跨页面、跨组件数据共享 | 适合复杂场景，但引入工具增加复杂度 |
| Behavior | 共享逻辑、共享数据 | 组件间逻辑复用，减少代码冗余 |
| 插件 | 不同小程序间的共享 | 适合大规模复用场景 |
