前言

• 好，經過上個章節的介紹完畢之后，了解了一下 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

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

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-数据传递补充的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。