• uniapp返回上一页携带参数,两种方法,实测有效


    方法一:

    • pages/pre/pre.vue
    <template>
    	<view>
    		<view>返回的数据为:</view>
    		<view>id: {{testdata.id}}</view>
    		<view>name: {{testdata.name}}</view>
    		<button type="primary" @click="goNext">跳转到下一页面</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				testdata: {
    					id: '',
    					name: ''
    				}
    			}
    		},
    		onShow() {
    			let that = this
    			uni.$on('updateData',function(data){
    				that.testdata = data
    				const params = 'id:'+data.id+', name:'+data.name;
    				console.log('监听到事件来自 updateData ,携带参数为:' + params);
    			})
    		},
    		methods: {
    			goNext() {
    				uni.navigateTo({
    					url: '/pages/next/next'
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    
    • pages/next/next.vue
    <template>
    	<view>
    		<button type="primary" @click="goBack">点击返回上一页</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				mydata: {
    					id: 1,
    					name: 'test'
    				}
    			}
    		},
    		methods: {
    			goBack() {
    				uni.$emit('updateData', this.mydata)
    				uni.navigateBack({
    					delta: 1
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    

    方法二(相对来说,没有方法一简练):

    • pages/pre/pre.vue
    <template>
    	<view>
    		<view>返回的数据为:</view>
    		<view>id: {{testdata.id}}</view>
    		<view>name: {{testdata.name}}</view>
    		<button type="primary" @click="goNext">跳转到下一页面</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				testdata: {
    					id: '',
    					name: ''
    				}
    			}
    		},
    		onShow() {
    			let pages = getCurrentPages();
    			let currPage = pages[pages.length - 1]; //当前页面
    			if(currPage.data != undefined){
    				let json = currPage.data.testdata;
    				this.testdata = json;
    			}
    		},
    		methods: {
    			goNext() {
    				uni.navigateTo({
    					url: '/pages/next/next'
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    
    • pages/next/next.vue
    <template>
    	<view>
    		<button type="primary" @click="goBack">点击返回上一页</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				mydata: {
    					id: 1,
    					name: 'test'
    				}
    			}
    		},
    		methods: {
    			goBack() {
    				var pages = getCurrentPages();
    				var prevPage = pages[pages.length - 2];
    				// #ifdef H5
    				prevPage.$vm.testdata = this.mydata;
    				// #endif
    				// #ifdef MP-WEIXIN
    				 prevPage.setData(this.mydata);
    				// #endif
    				uni.navigateBack({//返回
    					delta: 1
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    
  • 相关阅读:
    Golang中用==判断是否相等
    reactnative项目运行失败的解决方法
    使用Redis实现分布式锁
    Zksnarks笔记: from programe to QAP
    [loj6696]复读机 加强版
    [loj3561]The short shank; Redemption
    [atARC135D]Add to Square
    [atARC134F]Flipping Coins
    [loj2157]避雷针
    [loj3653]抽奖机
  • 原文地址:https://www.cnblogs.com/pansidong/p/15928999.html
Copyright © 2020-2023  润新知