前言

• 好，經(jīng)過上個(gè)章節(jié)的介紹完畢之后，了解了一下 uni-app-傳遞數(shù)據(jù)
• 那么了解完了uni-app-傳遞數(shù)據(jù)之后，這篇文章來給大家介紹一下 uni-app-CompositionAPI傳遞數(shù)據(jù)
• 首先不管三七二十一，先來新建一個(gè)項(xiàng)目

搭建演示環(huán)境

創(chuàng)建一個(gè)全新的項(xiàng)目：

然后在配置一下，微信小程序的 AppId，直接去之前的項(xiàng)目中拷貝一下即可，找到之前項(xiàng)目的 manifest.json 文件，然后選擇微信小程序配置，復(fù)制一下即可。

• 經(jīng)過如上的這么一頓操作之后，就可以搭建完畢運(yùn)行環(huán)境，與編碼環(huán)境
• 接下來就可以開始進(jìn)行介紹 uni-app-CompositionAPI傳遞數(shù)據(jù)內(nèi)容了

步入正題

通過路徑拼接傳遞數(shù)據(jù)

創(chuàng)建一個(gè) one 頁(yè)面，我們?cè)谑醉?yè)當(dāng)中編寫一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到 one 頁(yè)面，然后在 one 頁(yè)面當(dāng)中顯示傳遞過來的數(shù)據(jù)，我這里是通過 CompositionAPI 來進(jìn)行傳遞數(shù)據(jù)的，代碼如下：

<template>
	<view>
		<button type="primary" @click="onJumpOne">跳轉(zhuǎn)到One界面</button>
	</view>
</template>

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

然后在 one 頁(yè)面當(dāng)中接收數(shù)據(jù)，代碼如下：

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

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

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

然后我們點(diǎn)擊按鈕，跳轉(zhuǎn)到 one 頁(yè)面，可以看到控制臺(tái)打印出了我們傳遞過來的數(shù)據(jù)：

除了通過 option 來接收數(shù)據(jù)之外，我們還可以通過 props 來接收數(shù)據(jù)，代碼如下：

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

好了，這是正向傳遞數(shù)據(jù)，那么反向傳遞數(shù)據(jù)呢？

反向傳遞數(shù)據(jù)

我們?cè)?one 頁(yè)面當(dāng)中編寫一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到首頁(yè)頁(yè)面，然后在首頁(yè)頁(yè)面當(dāng)中顯示傳遞過來的數(shù)據(jù)，代碼如下：

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

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

頁(yè)面已經(jīng)搭建好了，那么我們就可以開始傳遞數(shù)據(jù)了，在之前我們是通過 this.getOpenerEventChannel(); 來進(jìn)行傳遞數(shù)據(jù)的，但是在 CompositionAPI 當(dāng)中沒有 this，那么我們現(xiàn)在要做的第一件事情就是獲取 this，在 compositionAPI 當(dāng)中獲取 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: '通過事件通道返回時(shí)傳遞數(shù)據(jù)'
		})
	}
</script>

如上代碼就是我們之前的逆著傳遞數(shù)據(jù)的代碼，改動(dòng)的點(diǎn)就是之前是 this.getOpenerEventChannel(); 現(xiàn)在是 $instance.value.getOpenerEventChannel();，然后我們?cè)谑醉?yè)當(dāng)中接收數(shù)據(jù)，代碼如下：

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

運(yùn)行一下，點(diǎn)擊按鈕跳轉(zhuǎn)到 one 頁(yè)面，然后點(diǎn)擊返回按鈕，可以看到控制臺(tái)打印出了我們傳遞過來的數(shù)據(jù)：

正向傳遞數(shù)據(jù)

那么逆向傳遞看完了，正向傳遞就來快速過一下，首先更改首頁(yè)的代碼，代碼如下：

<script setup>
	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one',
			success(res) {
				// 通過eventChannel向被打開頁(yè)面?zhèn)魉蛿?shù)據(jù)
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					data: '通過事件通道傳遞的數(shù)據(jù)'
				})
			}
		})
	}
</script>

然后在 one 頁(yè)面當(dāng)中接收數(shù)據(jù)，代碼如下：

<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>

運(yùn)行一下，點(diǎn)擊按鈕跳轉(zhuǎn)到 one 頁(yè)面，可以看到控制臺(tái)打印出了我們傳遞過來的數(shù)據(jù)：

最后

大家好我是 BNTang, 一個(gè)熱愛分享的技術(shù)的開發(fā)者，如果大家覺得我的文章對(duì)你有幫助的話，可以關(guān)注我的公眾號(hào) JavaBoyL，我會(huì)在公眾號(hào)中分享一些IT技術(shù)和一些個(gè)人的見解，謝謝大家的支持。

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-CompositionAPI传递数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。