数据传递

在微信小程序中，数据传递可以通过多种方式实现，包括父组件向子组件传递数据、子组件向父组件传递数据，以及通过全局变量或事件总线进行跨页面/组件的数据传递。下面详细介绍这些方法。

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

父组件可以通过属性（properties）将数据传递给子组件。

示例代码

父页面

// pages/index/index.js
Page({
  data: {
    message: "Hello, World!",
  },
});

<!-- pages/index/index.wxml -->
<view>
  <my-component message="{{message}}"></my-component>
</view>

子组件

// components/my-component/my-component.json
{
  "component": true
}

// components/my-component/my-component.js
Component({
  properties: {
    message: {
      type: String,
      value: "",
    },
  },

  attached: function () {
    console.log("Received message:", this.properties.message);
  },
});

<!-- components/my-component/my-component.wxml -->
<view>{{message}}</view>

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

子组件可以通过触发自定义事件将数据传递给父组件。

示例代码

子组件

// components/my-component/my-component.js
Component({
  properties: {
    // 定义属性
  },

  methods: {
    triggerTap: function () {
      const data = { id: 1, name: "Component" };
      this.triggerEvent("myevent", data); // 触发自定义事件并传递数据
    },
  },
});

<!-- components/my-component/my-component.wxml -->
<button bindtap="triggerTap">点击我</button>

父页面

// pages/index/index.js
Page({
  handleMyEvent: function (event) {
    console.log("Received event data:", event.detail);
  },
});

<!-- pages/index/index.wxml -->
<view>
  <my-component bindmyevent="handleMyEvent"></my-component>
</view>

3. 跨页面/组件的数据传递

对于跨页面或组件的数据传递，可以使用以下几种方法：

使用全局变量

可以在 App 对象中设置和获取全局数据。

app.js

// app.js
App({
  globalData: {
    sharedData: {},
  },
});

在某个页面或组件中设置全局数据

const app = getApp();
app.globalData.sharedData = { key: "value" };

在另一个页面或组件中获取全局数据

const app = getApp();
console.log(app.globalData.sharedData);

使用事件总线

可以创建一个事件总线来管理和分发事件。

创建事件总线

// utils/event-bus.js
let eventBus = {};

eventBus.on = function (eventName, callback) {
  if (!eventBus[eventName]) {
    eventBus[eventName] = [];
  }
  eventBus[eventName].push(callback);
};

eventBus.emit = function (eventName, data) {
  if (eventBus[eventName]) {
    eventBus[eventName].forEach((callback) => callback(data));
  }
};

module.exports = eventBus;

在页面中使用事件总线

// pages/index/index.js
const eventBus = require("../../utils/event-bus.js");

Page({
  data: {
    message: "",
  },

  onLoad: function () {
    // 订阅事件
    eventBus.on("customEvent", (data) => {
      console.log("Received event data in index page:", data);
      this.setData({ message: data.message });
    });
  },

  onUnload: function () {
    // 取消订阅事件（可选）
    eventBus.off("customEvent");
  },

  triggerCustomEvent: function () {
    const eventData = { message: "Hello from Index Page" };
    eventBus.emit("customEvent", eventData);
  },
});

在组件中使用事件总线

// components/my-component/my-component.js
const eventBus = require("../../utils/event-bus.js");

Component({
  properties: {
    // 定义属性
  },

  attached: function () {
    // 订阅事件
    eventBus.on("customEvent", (data) => {
      console.log("Received event data in my-component:", data);
      // 处理接收到的数据
    });
  },

  detached: function () {
    // 取消订阅事件（可选）
    eventBus.off("customEvent");
  },

  methods: {
    triggerCustomEvent: function () {
      const eventData = { message: "Hello from My Component" };
      eventBus.emit("customEvent", eventData);
    },
  },
});

总结

• 父组件向子组件传递数据：通过属性（properties）。
• 子组件向父组件传递数据：通过触发自定义事件。
• 跨页面/组件的数据传递：
  • 使用全局变量（App 对象的 globalData）。
  • 使用事件总线（自定义事件管理器）。

选择哪种方法取决于你的具体需求和应用场景。希望这些示例能够帮助你更好地理解和实现微信小程序中的数据传递。