uniapp-页面之间传值和标签反向传值

之前开发了一款蓝牙工具，本想着使用android原生开发，无意间发现uniapp也可以进行底层开发，结果一系列踩坑开始，几次尝试后，终于没有问题了，今天总结下我用到的页面传值。

一、子标签回传数据：

在开发过程中，我们的代码最好能够实现低耦合，也就是说，页面和子标签之间不要过于依赖，这样既能够实现底层代码复用，也让单个界面干净不少，举个例子：

我们写了一个界面，里面有列表，而且这些列表元素样式很复杂，那么我们就应该单一的写一个列表元素样式，让后在本界面里面复用，但是，子标签里面的值如何回传呢，代码：

子标签代码：

<template>
	<view class="message-list">
		<view class="u-f-ac u-f-jsb" @tap="btBackValue">名称:{{item.name}}年龄:{{item.age}</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:Object,
			index:Number
		},
		methods:{
		//点击列表元素后执行该方法
			btBackValue(){
				//往列表界面传值（connectBackV为回传的方法标识）
				this.$emit('connectBackV', {
				    name: this.item.name,
				    age: this.item.age
				});
			}
		}
	}
</script>

<style scoped>
	.message-list{
		border-bottom: 1upx solid #EEEEEE;
		padding: 20upx 0;
	}
</style>
           

本页面代码：

<template>
	<view>
		<!--列表-->
		<block v-for="(item,index) in list" :key="index">
			<messageList :item="item" :index="index" @connectBackV="connectBackV"></messageList>
		</block>
	</view>
</template>

<script>
	import messageList from "../../components/listTest/BT-list.vue";
	export default {
		components: {
			messageList
		},
		data() {
			return {
				list: [
				{name:"张三",age:21},
				{name:"李四",age:22},
				{name:"王五",age:25}
				]
			}
		}, 
		methods: {
			//接受点击后回传的值
			connectBackV(e){		
				console.log("电子子标签后的回传值为："+e);
				console.log("点击了："+e.name+"年龄为:"+e.age);
			}
		}
	}
</script>

<style>
</style>
           

现在，界面会以列表显示出张三，李四，王五三条数据，当任意点击一条后，后台会打印出信息

二、子界面向上级界面回传数据：

此方式应用在，点击按钮跳转到子界面，子界面在任意地方向上级界面回传数据

父页面代码：

<view>
	<button type="primary" size="mini" @tap="gotoSubFrame">跳转到子页面</button>
</view>

<script>
	export default {
		methods{
			gotoSubFrame(){
				//新建监听事件
				uni.$on('value1', function(e){
					//关闭当前监听（防止浪费资源，先关闭后执行其他操作）
					uni.$off('value1');
					console.log("子页面回传数据为:"+e);
				});
				//跳转到子页面
				uni.navigateTo({
				    url: 'subFrame'
				});
			}
		}
	}
</script>
           

子页面代码：

<view>
	<button type="primary" size="mini" @tap="sendValue">向父页面传值并返回父页面</button>
</view>

<script>
	export default {
		methods{
			sendValue(){		
				//传值
				uni.$emit('value1',"啦啦啦，这是子页面回传值");
				//返回父页面
				uni.navigateBack();		
			}
		}
	}
</script>
           

运行后点击按钮，后台打印数据：

子页面回传数据为:啦啦啦，这是子页面回传值