小程序页面传值传递对象[Object Object]

跨页面传递对象数据
本文介绍了一种在不同页面间传递复杂对象数据的方法。具体步骤包括:首先将对象转换为字符串形式;接着将该字符串附加到导航URL上;最后,在目标页面通过解析字符串还原为原始对象。

需求:通过打印typeof(this.data.tsData)查看tsData的类型为Object,此时需要把tsData的信息传递到另一个页面。

1.先将要传的对象转译一下

使用JSON.stringifyobject类型的tsData转译为string类型的china_detail

// id表示tsData里的第几条数据,如id=0,1,2....
var china_detail=JSON.stringify(this.data.tsData[id])

2.将声明的变量拼接在 url上
将string类型的china_detail拼接到url上,传递到detail页面

wx.navigateTo({
      url: '../detail/detail?id='+id+'&china_detail='+china_detail,
    })

3.到跳转的页面上去接受转译的对象变量

detail页面的onload函数中使用JSON.parsechina_detail转译成object类型

data: {
	china_detail:{}
},
onLoad: function (options) {
		this.setData({
			china_detail:JSON.parse(options.china_detail)
		})
		console.log(this.data.china_detail)
	},

打印效果如下,得到了对象
在这里插入图片描述

### 微信小程序组件之间值方法 #### 1. 父组件向子组件值(父 → 子) 父组件可以通过 `properties` 将数据递给子组件。在子组件中,通过 `properties` 定义接收的属性类型和默认值[^5]。 - **父组件代码**: ```html <users memberDetail="{{memberDetail}}" userInfo="{{userInfo}}"></users> ``` - **子组件代码**: ```javascript Component({ properties: { memberDetail: { type: Object, value: {} }, userInfo: { type: Object, value: {} } }, methods: { getVal() { console.log(this.properties.memberDetail); // 输出父组件递的数据 } } }); ``` #### 2. 子组件向父组件值(子 → 父) 子组件可以通过触发自定义事件将数据递给父组件。父组件通过绑定事件处理函数来接收子组件递的数据[^3]。 - **子组件代码**: ```javascript Component({ methods: { sendDataToParent() { this.triggerEvent('send', { detail: '子组件递的数据' }); } } }); ``` - **父组件代码**: ```html <users bindsend="handleSend" memberDetail="{{memberDetail}}" userInfo="{{userInfo}}"></users> ``` ```javascript Page({ data: { receivedData: '' }, handleSend(e) { console.log(e.detail); // 输出子组件递的数据 this.setData({ receivedData: e.detail }); } }); ``` #### 3. 父组件向子组件递方法 父组件可以通过 `properties` 将方法递给子组件,子组件调用该方法时可以将数据回给父组件[^4]。 - **父组件代码**: ```html <users parentMethod="handleItemChange"></users> ``` - **子组件代码**: ```javascript Component({ properties: { parentMethod: { type: Function, value: null } }, methods: { callParentMethod() { this.properties.parentMethod({ detail: '子组件的数据' }); } } }); ``` - **父组件处理方法**: ```javascript Page({ handleItemChange(e) { console.log(e.detail); // 输出子组件递的数据 } }); ``` #### 4. 组件间通信的其他方式 如果组件之间没有直接的父子关系,可以通过全局数据或事件总线实现组件间的通信[^1]。 - **全局数据**:通过 `getApp()` 获取全局应用实例,使用 `globalData` 进行数据共享。 - **事件总线**:创建一个独立的事件管理模块,组件通过该模块发送和接收事件。 #### 示例代码:通过全局数据共享 - **app.js**: ```javascript App({ globalData: { sharedData: '' } }); ``` - **组件A**: ```javascript const app = getApp(); Component({ methods: { setGlobalData() { app.globalData.sharedData = '组件A的数据'; } } }); ``` - **组件B**: ```javascript const app = getApp(); Component({ attached() { console.log(app.globalData.sharedData); // 输出组件A设置的数据 } }); ``` ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值