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

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


1. 父组件向子组件传递数据

通过 properties(组件属性),父组件可以将数据传递给子组件。

父组件(Page 或父组件的 WXML 和 JS):
html 复制代码
<child-component custom-data="{{parentData}}" />
javascript 复制代码
Page({
  data: {
    parentData: 'Hello from parent!'
  }
});
子组件(child-component 的 JS 文件):
javascript 复制代码
Component({
  properties: {
    customData: {
      type: String,
      value: '' // 默认值
    }
  },
  observers: {
    customData(newVal) {
      console.log('Received from parent:', newVal);
    }
  }
});

2. 子组件向父组件传递数据

通过 事件机制,子组件可以向父组件传递数据。

子组件(child-component 的 JS 文件):
javascript 复制代码
Component({
  methods: {
    sendDataToParent() {
      this.triggerEvent('customEvent', { data: 'Hello from child!' });
    }
  }
});
父组件(Page 或父组件的 WXML 和 JS):
html 复制代码
<child-component bind:customEvent="handleCustomEvent" />
javascript 复制代码
Page({
  handleCustomEvent(e) {
    console.log('Received from child:', e.detail.data);
  }
});

3. 兄弟组件间的数据传递

兄弟组件无法直接通信,通常通过 父组件中转 或使用 全局状态管理

方法 1:通过父组件中转

父组件充当兄弟组件的通信桥梁。

  • 兄弟组件 A 向父组件触发事件,父组件监听并将数据传递给兄弟组件 B。
方法 2:使用全局状态(见方法 4)

4. 全局状态管理

通过小程序的 全局对象状态管理工具 实现组件间的数据共享。

方法 1:使用全局对象(App 对象)
javascript 复制代码
// app.js
App({
  globalData: {
    sharedData: 'Shared data'
  }
});

在组件中访问:

javascript 复制代码
// 任意组件的 JS 文件
const app = getApp();
console.log(app.globalData.sharedData);
方法 2:使用状态管理工具

wx-miniprogram/store 等开源库,提供响应式的状态管理功能。


5. 使用 PageComponent 事件系统

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

示例:
  1. 组件 A 向页面发送事件:

    javascript 复制代码
    Component({
      methods: {
        sendData() {
          this.triggerEvent('sendToPage', { data: 'Data from A' });
        }
      }
    });
  2. 页面接收事件并将数据传递给组件 B:

    javascript 复制代码
    Page({
      data: {
        dataForB: ''
      },
      handleSendToPage(e) {
        this.setData({ dataForB: e.detail.data });
      }
    });
  3. 页面将数据传递给组件 B:

    html 复制代码
    <component-b custom-data="{{dataForB}}" />

6. 自定义 Behavior 实现共享逻辑

Behavior 是一种组件间逻辑复用的方式,多个组件可以通过共享 Behavior 来实现数据共享。

定义 Behavior
javascript 复制代码
// behaviors/shared-data.js
module.exports = Behavior({
  data: {
    sharedValue: 'Shared value'
  },
  methods: {
    updateSharedValue(newValue) {
      this.setData({ sharedValue: newValue });
    }
  }
});
使用 Behavior
javascript 复制代码
// 组件 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 共享逻辑、共享数据 组件间逻辑复用,减少代码冗余
插件 不同小程序间的共享 适合大规模复用场景
相关推荐
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
韩立学长1 天前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
亮子AI2 天前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082852 天前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆2 天前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北2 天前
洗车小程序系统
微信小程序·小程序
namehu2 天前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20122 天前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
盛夏绽放2 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠2 天前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio