微信小程序几种数据通信方式记录

在微信小程序开发中，组件间的数据传递是一个常见的需求。以下是不同组件间数据传递的方式，根据传递的方向（父子、兄弟、跨层级等）提供了多种方法。

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	共享逻辑、共享数据	组件间逻辑复用，减少代码冗余
插件	不同小程序间的共享	适合大规模复用场景