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>
           

運作後點選按鈕，背景列印資料：

子頁面回傳資料為:啦啦啦，這是子頁面回傳值