uni-app 两个页面传值

淡淡的烟草味﹌ 2023-10-09 20:52 12阅读 0赞

--------------------

### highlight: a11y-dark ###

##### 1 可以使用路由传参的方式来打开页面并传递数据。 #####

如这里传递的一个列表数据 以下是具体步骤：

###### 1.1 确定数据格式 ######

例如我们要传递一个名为 `listData` 的List，其中包含 `name` 和 `age` 两个属性：

let listData = [
      {name: 'Tom', age: 20},
      {name: 'Jerry', age: 18},
      {name: 'Lucy', age: 22},
    ]

###### 2.2 在发送数据的页面中，使用 `uni.navigateTo` 方法打开目标页面，并在 `url` 后面添加参数： ######

uni.navigateTo({
      url: '/pages/targetPage/targetPage?listData=' + JSON.stringify(listData),
    })

注意，由于路由只能传递字符串类型，因此需要使用 `JSON.stringify()` 将List数据转换为字符串。

###### 1.3 在接收数据的页面中，通过 `onLoad` 方法获取参数，并使用 `JSON.parse()` 将字符串转换为List数据格式： ######

onLoad: function(options) {
      let listData = JSON.parse(options.listData)
      console.log(listData)
    }

这里的 `options.listData` 即为发送页面中传递的参数，通过 `JSON.parse()` 方法将其转换为List数据格式，并进行打印输出。

通过以上步骤，我们就可以在uniapp中打开页面并传递List数据了。

--------------------

##### 2 可以通过 uni-app中的全局变量来传递值。 #####

以下是具体步骤：

###### 2.1 在 `App.vue` 中定义全局变量 ######

例如：

export default {
      globalData: {
        message: ''
      },
      ...
    }

###### 2.2 在需要传值的页面中，设置全局变量的值： ######

this.$root.globalData.message = 'Hello World!';

###### 2.3 在需要获取传值的页面中，直接访问全局变量的值即可： ######

console.log(this.$root.globalData.message); // 输出：Hello World!

另外，还可以使用路由跳转时传递参数的方式，在 `$router.push` 等方法中指定参数进行传递。

如果你有兴趣可以关注一下公众号 **biglead** 来获取更多内容，或者[访问我的课程][Link 1]

[Link 1]: https://link.juejin.cn/?target=https%3A%2F%2Fstudy.163.com%2Fcourse%2Fintroduction%2F1209784860.htm%3FinLoc%3Dss_ssjg_qblb_Flutter%25E7%25BB%2584%25E4%25BB%25B6%25E7%25B2%25BE%25E8%25AE%25B2%25E4%25B8%258E%25E5%25AE%259E%25E6%2588%2598%25E5%25BC%2580%25E5%258F%2591