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

BNTang發表於2023-12-17
APP

前言

  • 好，經過上個章節的介紹完畢之後，瞭解了一下 uni-app-CompositionAPI傳遞資料
  • 那麼瞭解完了uni-app-CompositionAPI傳遞資料之後，這篇文章來給大家介紹一下 uni-app-資料傳遞補充（也就是在補充一點內容給到大家）
  • 先主要介紹逆向傳遞資料，逆向傳遞資料除了使用事件通道之外，還可以透過 uni.$emit 的方式來進行傳遞資料，這種方式也是非常的簡單
  • 先來簡單的搭建一個演示環境，然後來進行介紹
  • 分別從 Vue2 與 Vue3 進行介紹

搭建演示環境

建立一個全新的專案(先來看 Vue2 版本的，所以在建立專案的時候選擇 Vue2)：

然後在配置一下，微信小程式的 AppId，直接去之前的專案中複製一下即可，找到之前專案的 manifest.json 檔案，然後選擇微信小程式配置，複製一下即可。

  • 經過如上的這麼一頓操作之後，就可以搭建完畢執行環境，與編碼環境
  • 接下來就可以開始進行介紹 uni-app-資料傳遞補充內容了

步入正題

emit(Vue2)

  • 專案建立好了，我們現在需要分別建立對應的頁面，分別是 one 與 index 頁面
  • 在 one 頁面中建立一個按鈕，點選按鈕之後跳轉到 index 頁面，然後在 index 頁面中建立一個按鈕，點選按鈕之後跳轉到 one 頁面
  • 在 one 返回按鈕的函式中，透過 uni.$emit 的方式來傳遞資料，然後在 index 頁面中透過 uni.$on 來接收資料
  • 在 index 頁面中除了透過 uni.$on 來接收資料之外，還需要在 onUnload 生命週期函式中透過 uni.$off 來取消監聽
  • 反正你要記住監聽了方法那麼就一定要取消監聽，不然會造成記憶體洩漏的問題

one 頁面：

<template>
	<view>
		<text>one頁面</text>
		<button type="primary" @click="onGoBackClick">返回到上一頁</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			onGoBackClick() {
				uni.navigateBack({
					delta: 1
				});

				// 透過 $emit 傳遞資料
				uni.$emit("test", {
					data: "透過$emit直接傳遞資料"
				})
			}
		}
	}
</script>

index 頁面：

<template>
	<view>
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one'
				})
			}
		},
		onLoad() {
			uni.$on("test", (data) => {
				console.log(data)
			})
		},
		onUnload() {
			uni.$off("test")
		}
	}
</script>
  • 經過如上的這麼一番操作之後，我們就可以在控制檯中看到我們傳遞的資料了

emit(Vue3)

  • 在 Vue3 中，其實寫法大差不差的，只不過在 setup 函式中進行編寫
  • 廢話不多說，直接上程式碼

one 頁面：

<template>
	<view>
		<text>one</text>
		<text>=======================</text>
		<button type="default" @click="onGoBackClick">返回上一個介面</button>
	</view>
</template>

<script setup>
	function onGoBackClick() {
		uni.navigateBack({
			delta: 1
		});

		// 透過 $emit 傳遞資料
		uni.$emit("test", {
			data: "透過$emit直接傳遞資料"
		})
	}
</script>

index 頁面：

<template>
	<view>
		<button type="primary" @click="onJumpOne">跳轉到One介面</button>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one'
		})
	}

	onLoad(() => {
		uni.$on("test", (data) => {
			console.log(data)
		})
	})

	onUnload(() => {
		uni.$off("test")
	})
</script>

總結

順著傳遞資料

  • 透過URL傳遞資料，然後透過 onLoad 生命週期函式中的 options 引數來接收資料
  • 透過 eventChannel.emit 事件通道傳遞資料，然後透過 eventChannel.on 來接收資料

逆向傳遞資料

  • 透過 uni.$emit 傳遞資料，然後透過 uni.$on 來接收資料（有一個注意點，就是 uni.$on 註冊的事件一定要在頁面解除安裝的時候透過 uni.$off 登出掉）
  • 透過 eventChannel.emit 事件通道傳遞資料，然後透過 events 引數來接收資料

End

  • 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
  • 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支援是我寫作的最大動力

相關文章