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

BNTang發表於2023-12-17

前言

  • 好,經過上個章節的介紹完畢之後,瞭解了一下 uni-app-傳遞資料
  • 那麼瞭解完了uni-app-傳遞資料之後,這篇文章來給大家介紹一下 uni-app-CompositionAPI傳遞資料
  • 首先不管三七二十一,先來新建一個專案

搭建演示環境

建立一個全新的專案:

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

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

步入正題

透過路徑拼接傳遞資料

建立一個 one 頁面,我們在首頁當中編寫一個按鈕,點選按鈕跳轉到 one 頁面,然後在 one 頁面當中顯示傳遞過來的資料,我這裡是透過 CompositionAPI 來進行傳遞資料的,程式碼如下:

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

<script setup>
	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one?name=BNTang&age=18'
		})
	}
</script>

然後在 one 頁面當中接收資料,程式碼如下:

<template>
	<view>
		<text>One</text>
	</view>
</template>

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

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

然後我們點選按鈕,跳轉到 one 頁面,可以看到控制檯列印出了我們傳遞過來的資料:

除了透過 option 來接收資料之外,我們還可以透過 props 來接收資料,程式碼如下:

<script setup>
	const props = defineProps({
		name: String,
		age: Number
	})
	console.log(props.name, props.age);
</script>

好了,這是正向傳遞資料,那麼反向傳遞資料呢?

反向傳遞資料

我們在 one 頁面當中編寫一個按鈕,點選按鈕跳轉到首頁頁面,然後在首頁頁面當中顯示傳遞過來的資料,程式碼如下:

<template>
	<view>
		<text>One</text>
		<button type="primary" @click="goBackClick">返回首頁</button>
	</view>
</template>

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

頁面已經搭建好了,那麼我們就可以開始傳遞資料了,在之前我們是透過 this.getOpenerEventChannel(); 來進行傳遞資料的,但是在 CompositionAPI 當中沒有 this,那麼我們現在要做的第一件事情就是獲取 this,在 compositionAPI 當中獲取 this 可以透過 getCurrentInstance() 來獲取,程式碼如下:

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	// 獲取 this
	const $instance = ref(getCurrentInstance().proxy)

    ... other
</script>

竟然獲取到了 this,那麼接下來的程式碼就和之前的一樣了,程式碼如下:

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	// 獲取 this
	const $instance = ref(getCurrentInstance().proxy)

	function goBackClick() {
		uni.navigateBack({
			delta: 1
		});
		
		const eventChannel = $instance.value.getOpenerEventChannel();
		eventChannel.emit("acceptDataFromOpenerPage", {
			data: '透過事件通道返回時傳遞資料'
		})
	}
</script>

如上程式碼就是我們之前的逆著傳遞資料的程式碼,改動的點就是之前是 this.getOpenerEventChannel(); 現在是 $instance.value.getOpenerEventChannel();,然後我們在首頁當中接收資料,程式碼如下:

<script setup>
	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one?name=BNTang&age=18',
			events: {
				acceptDataFromOpenerPage(data) {
					console.log(data)
				}
			}
		})
	}
</script>

執行一下,點選按鈕跳轉到 one 頁面,然後點選返回按鈕,可以看到控制檯列印出了我們傳遞過來的資料:

正向傳遞資料

那麼逆向傳遞看完了,正向傳遞就來快速過一下,首先更改首頁的程式碼,程式碼如下:

<script setup>
	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one',
			success(res) {
				// 透過eventChannel向被開啟頁面傳送資料
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					data: '透過事件通道傳遞的資料'
				})
			}
		})
	}
</script>

然後在 one 頁面當中接收資料,程式碼如下:

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

	// 獲取 this
	const $instance = ref(getCurrentInstance().proxy)

	onLoad((option) => {
		const eventChannel = $instance.value.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', function(data) {
			console.log(data)
		})
	})
</script>

執行一下,點選按鈕跳轉到 one 頁面,可以看到控制檯列印出了我們傳遞過來的資料:

最後

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

相關文章