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

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

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 事件系统

如果多个组件在同一个页面，可以利用 页面方法 实现数据共享。

示例：

1. 组件 A 向页面发送事件：

   Component({
     methods: {
       sendData() {
         this.triggerEvent('sendToPage', { data: 'Data from A' });
       }
     }
   });
   

2. 页面接收事件并将数据传递给组件 B：

   Page({
     data: {
       dataForB: ''
     },
     handleSendToPage(e) {
       this.setData({ dataForB: e.detail.data });
     }
   });
   

3. 页面将数据传递给组件 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:// 机制。

总结与适用场景