Taro 中如何进行页面传参？

推荐答案

在 Taro 中，页面传参可以通过以下几种方式实现：

1. URL 传参：通过 navigateTo 或 redirectTo 等方法跳转页面时，在 URL 中传递参数。
2. 全局状态管理：使用 Taro 提供的 getApp() 方法或第三方状态管理库（如 Redux、MobX）来共享数据。
3. 事件总线：通过 Taro 的 Event 系统进行跨页面通信。

URL 传参示例

// www.javascriptcn.com code example
// 页面 A
Taro.navigateTo({
  url: '/pages/pageB/index?id=123&name=foo'
})

// 页面 B
componentDidMount() {
  const { id, name } = this.$router.params
  console.log(id, name) // 输出: 123 foo
}

全局状态管理示例

// www.javascriptcn.com code example
// app.js
App({
  globalData: {
    userInfo: null
  }
})

// 页面 A
const app = getApp()
app.globalData.userInfo = { id: 123, name: 'foo' }
Taro.navigateTo({
  url: '/pages/pageB/index'
})

// 页面 B
componentDidMount() {
  const app = getApp()
  const userInfo = app.globalData.userInfo
  console.log(userInfo) // 输出: { id: 123, name: 'foo' }
}

事件总线示例

// www.javascriptcn.com code example
// 页面 A
Taro.eventCenter.trigger('customEvent', { id: 123, name: 'foo' })
Taro.navigateTo({
  url: '/pages/pageB/index'
})

// 页面 B
componentDidMount() {
  Taro.eventCenter.on('customEvent', (data) => {
    console.log(data) // 输出: { id: 123, name: 'foo' }
  })
}

本题详细解读

URL 传参

URL 传参是最常见的方式，适合传递简单的数据。通过 navigateTo 或 redirectTo 跳转页面时，可以在 URL 中附加参数。目标页面可以通过 this.$router.params 获取这些参数。

优点：

• 简单直接，适合传递少量数据。
• 参数在 URL 中可见，便于调试。

缺点：

• 不适合传递复杂或敏感数据。
• URL 长度有限制，传递大量数据时可能受限。

全局状态管理

全局状态管理适合在多个页面之间共享数据。通过 getApp() 方法可以访问全局数据对象 globalData，并在不同页面中读写数据。

优点：

• 适合传递复杂数据或需要在多个页面共享的数据。
• 数据不会暴露在 URL 中，安全性较高。

缺点：

• 需要手动管理全局状态，可能导致状态混乱。
• 不适合一次性传递数据，数据会一直保留在全局状态中。

事件总线

事件总线是一种发布-订阅模式，适合在页面之间传递事件和数据。通过 Taro.eventCenter 可以触发和监听自定义事件。

优点：

• 适合跨页面通信，解耦页面之间的依赖。
• 可以传递复杂数据，且数据不会暴露在 URL 中。

缺点：

• 需要手动管理事件的订阅和取消订阅，可能导致内存泄漏。
• 不适合传递需要持久化的数据。

总结

在实际开发中，可以根据具体需求选择合适的传参方式。对于简单的数据传递，URL 传参是最常用的方式；对于需要在多个页面共享的数据，全局状态管理更为合适；而对于跨页面的事件通信，事件总线是一个不错的选择。