uniapp中多个页面传递参数到一个页面内

uniapp中多个页面传递参数到一个页面内_第1张图片
A页面传参到B页面的时候跳转的时候携带参数,在B页面中的onLoad(option){}接收即可。
A:

uni.navigateTo({url:'../pageB/pageB?id='+12})

B:

 onLoad(option) {
		let data=option.id
		console.log(data,'页面A传递的参数')
	},

B页面跳转到C页面,然后在C页面内要携带参数返回到B页面内的时候,

  • 如果在C页面内这样写:会发现B页面内以前根据ID渲染的数据没了。
uni.navigateTo({
		url:'../pageB/pageB?name='+'巴比伦'
	})

此时B页面onLoad(option)生命周期函数中,接收的数据只有C页面刚传递的name值了。


解决办法:

  • C页面跳转到B页面的时候,使用navigateBack(),此时B页面的接收的A页面的值还依然存在。
 uni.navigateBack({
		delta:1
	})
此时C页面向B页面要传递的参数可以这样传递:
  1. 可以使用全局事件监听方法(这个很好用)
    this.$emit用法
  • C页面:第一个参数是事件名,第二个是触发事件携带的附加参数
uni.$emit('selectName','巴比伦')
  • B页面:第一个参数是事件名,第二个是事件回调函数
onShow() {
			uni.$on('selectName',(res)=>{
				console.log(res,'从C页面传递的数据')
			})
		}
  • $on事件要在onShow()中写……在onLoad()中没反应
  1. 可以将C页面要传递的参数存储到vuex中,在B页面内访问即可。
this.$store.state.name='巴比伦'
  1. 使用本地存储的方式

vue项目使用router传参和route接收也是这种思想吧……

你可能感兴趣的:(uni-app,vue)