【UniApp】-uni-app-傳遞資料

BNTang發表於2023-12-16
APP

前言

  • 好，經過上個章節的介紹完畢之後，瞭解了一下 uni-app-路由
  • 那麼瞭解完了uni-app-路由之後，這篇文章來給大家介紹一下 uni-app-路由傳遞資料

路由傳參怎麼傳，是不是可以從 A 頁面傳遞給 B 頁面，然後 B 頁面再傳遞給 C 頁面, 也可以從 C 頁面傳遞給 B 頁面，然後 B 頁面再傳遞給 A 頁面（可以順著傳也可以逆著傳遞）。

注意點：我這裡沒有使用新建專案，而是使用的是上一篇文章的專案，所以大家可以直接在上一篇文章的專案上進行修改。

步入正題

透過元件跳轉傳遞資料(包含API)

  • 傳遞

更改 navigate 跳轉的路由在後面加上 ? 號，然後在後面加上引數，引數的格式是 key=value，多個引數之間用 & 連線。

<navigator url="/pages/one/one?name=BNTang&age=18" open-type="navigate">
    <button type="default">navigate</button>
</navigator>

這樣改寫了之後，我們在跳轉到 one 頁面的時候，就會把 name 和 age 兩個引數傳遞過去。

  • 接收

在 one 頁面中，可以在 onLoad 生命週期中進行接收，他會在 onLoad 生命週期中接收到一個引數 options，這個 options 就是我們傳遞過來的引數，我們可以透過 options.name 和 options.age 來獲取到我們傳遞過來的引數。

<script>
	export default {
		onLoad(option) {
			console.log(option)
		}
	}
</script>

如上的透過元件的方式，我們快速的來過一邊透過 API 的方式來傳遞資料, 程式碼如下：

<template>
	<view>
        省略...
      
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one?name=LeaderTang&age=18'
				})
			}
		}
	}
</script>

這種方式傳遞資料是最簡單的，除了這種方式，還有其他的方式來傳遞資料，下面我們來看一下其他的方式。

透過事件通道傳遞資料(API路由跳轉)

開啟 UniApp 官方文件：https://uniapp.dcloud.net.cn/api/router.html#navigateto

在 navigateTo 中，有介紹到一個 success 回撥函式，這個回撥函式是在跳轉成功之後執行的，我們可以在這個回撥函式中進行傳遞資料。

<template>
	<view>
      省略...

      <button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one',
					success: function(res) {
						// 透過eventChannel向被開啟頁面傳送資料
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: '透過事件通道傳遞的資料'
						})
					}
				})
			}
		}
	}
</script>

如上程式碼在 success 回撥函式中，我們透過 res.eventChannel.emit 方法來傳遞資料，這個方法接收兩個引數，第一個引數是一個字串，這個字串是我們在接收資料的頁面中定義的(兩邊要一致，自己定義)，第二個引數是一個物件，這個物件就是我們要傳遞的資料。

然後我們在 one 頁面中接收資料，程式碼如下：

<template>
	<view>
		<text>one</text>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
			})
		}
	}
</script>

如上程式碼，我們在 onLoad 生命週期中透過 this.getOpenerEventChannel() 方法來獲取到事件通道，然後透過 eventChannel.on 方法來接收資料，這個方法接收兩個引數，第一個引數是我們在跳轉頁面中定義的字串，第二個引數是一個回撥函式，這個回撥函式中的引數就是我們傳遞過來的資料。

看了這麼多都是從上一個頁面傳遞到下一個頁面，那麼我們怎麼從下一個頁面傳遞到上一個頁面呢？這正是我接下來要介紹的內容。

返回上一個頁面傳遞資料

開啟 UniApp 官方文件：https://uniapp.dcloud.net.cn/api/router.html#navigateback

返回上一個頁面，我們可以透過 navigateBack 方法來實現，這個方法接收一個引數 delta，這個引數是一個數字，表示返回的頁面數，如果 delta 是 1，表示返回上一個頁面，如果 delta 是 2，表示返回上兩個頁面，以此類推（堆疊結構）。

我們先來搭建頁面，放一個按鈕，點選按鈕返回上一個頁面。

<template>
	<view>
		<text>one</text>
		<text>=======================</text>
		<button type="default" @click="onGoBackClick">返回上一個介面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onGoBackClick() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

如上程式碼，我們在點選按鈕的時候，呼叫 navigateBack 方法，傳遞一個 delta 引數，這個引數是 1，表示返回上一個頁面。

那麼怎麼在返回上一個頁面的時候，傳遞資料呢？我們可以在 onGoBackClick 方法中獲取事件通道，然後透過 eventChannel.emit 方法來傳遞資料，程式碼如下：

const eventChannel = this.getOpenerEventChannel();
eventChannel.emit("acceptDataFromOpenerPage", {
    data: '透過事件通道返回時傳遞資料'
})

如上程式碼，我們在點選按鈕的時候，獲取事件通道，然後透過 emit 方法來傳遞資料，這個方法接收兩個引數，第一個引數是一個字串，這個字串是我們在接收資料的頁面中定義的(兩邊要一致，自己定義)，第二個引數是一個物件，這個物件就是我們要傳遞的資料。

返回時我們傳遞了資料，那麼我們怎麼接收資料呢？我們可以在上一個頁面中的跳轉 API 物件中透過 events 引數, 在 events 定義一個回撥函式，這個回撥函式的名字必須與返回頁面中 emit 方法中的第一個引數一致，然後在這個回撥函式中接收資料，程式碼如下：

events: {
    acceptDataFromOpenerPage(data) {
        console.log(data)
    }
}

  • 測試結果

這種透過事件通道的方式比較通用，不管是從上一個頁面傳遞到下一個頁面，還是從下一個頁面傳遞到上一個頁面，都可以透過這種方式來傳遞資料。

最後

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支援。

相關文章