Navigator组件传参

2023-12-06 22:31:52

小程序传参：无缝衔接页面信息

引言

在微信小程序的开发过程中，页面之间的传参是不可避免的。通过将数据从一个页面传递到另一个页面，我们可以实现信息共享，从而提升用户体验。本文将深入探讨微信小程序的传参方式，为您提供全面的解决方案。

Navigator组件是微信小程序中用于页面跳转的内置组件。通过设置url属性，我们可以指定跳转的目标页面。在url属性中，我们可以使用?分隔符将参数附加到URL之后。

wx.navigateTo({
  url: '/page/target?param1=value1&param2=value2',
});

接收参数：

在目标页面中，我们可以通过options对象接收传递的参数。

// 在目标页面的onLoad函数中获取参数
const params = this.options;
const param1 = params.param1;
const param2 = params.param2;

除了使用Navigator组件，我们还可以使用navigateTo方法实现页面跳转并携带参数。navigateTo方法接受一个object参数，其中包含url和params属性。

wx.navigateTo({
  url: '/page/target',
  params: {
    param1: 'value1',
    param2: 'value2',
  },
});

接收参数：

与Navigator组件类似，目标页面可以通过options对象接收参数。

// 在目标页面的onLoad函数中获取参数
const params = this.options;
const param1 = params.param1;
const param2 = params.param2;

事件传参是一种通过事件触发器传递参数的方式。当触发一个事件时，我们可以通过事件对象的detail属性传递参数。

// 在源页面中触发事件，传递参数
this.triggerEvent('customEvent', {
  param1: 'value1',
  param2: 'value2',
});

// 在目标页面中监听事件，接收参数
this.on('customEvent', (e) => {
  const param1 = e.detail.param1;
  const param2 = e.detail.param2;
});

组件传参是指将数据从父组件传递到子组件。我们可以通过设置子组件的属性来实现传参。

// 在父组件中设置子组件的属性
<child-component param1="value1" param2="value2" />

// 在子组件中获取属性
const params = this.props;
const param1 = params.param1;
const param2 = params.param2;