uniapp頁(yè)面間傳參的幾種方法實(shí)例總結(jié)
前言
在Uniapp中的傳參主要分為以下三種類型:
上級(jí)頁(yè)面 → 下級(jí)頁(yè)面(單向)上級(jí)頁(yè)面 ← 下級(jí)頁(yè)面(單向)上級(jí)頁(yè)面 ↔ 下級(jí)頁(yè)面(雙向)本文將圍繞這三種傳參展開,分享其使用方法以及我使用中所遇到的問(wèn)題與解決方法。
一、上級(jí)頁(yè)面 → 下級(jí)頁(yè)面(單向)
uni.navigateTo:URL編程式傳參
作為最常用也是最簡(jiǎn)單的跳轉(zhuǎn)攜帶參數(shù)的API,這里不多贅述,想詳細(xì)了解的朋友可以前往官方文檔學(xué)習(xí),這里只做傳參分享。
攜帶靜態(tài)參數(shù)
//在起始頁(yè)面跳轉(zhuǎn)到test.vue頁(yè)面并傳遞參數(shù) //作用場(chǎng)景,需要提供固定傳參狀態(tài)的頁(yè)面,一般和動(dòng)態(tài)參數(shù)一起使用 uni.navigateTo({ url: 'test?id=1&name=uniapp' });
攜帶動(dòng)態(tài)參數(shù)
//在起始頁(yè)面跳轉(zhuǎn)到test.vue頁(yè)面并傳遞參數(shù) let uniapp = { uniappItem: 0, }; //當(dāng)傳遞的參數(shù)是對(duì)象時(shí),必須先轉(zhuǎn)化為JSON格式 uni.navigateTo({ url: 'test?id=1&name=' + JSON.stringify(uniapp), });
頁(yè)面接收
// 在test.vue頁(yè)面接受參數(shù) export default { onLoad: function (option) { //option為object類型,會(huì)序列化上個(gè)頁(yè)面?zhèn)鬟f的參數(shù) console.log(option.id); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。 console.log(option.name); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。 } }
<navigator>標(biāo)簽傳參
URL有長(zhǎng)度限制,太長(zhǎng)的字符串會(huì)傳遞失敗,可改用窗體通信、全局變量,另外參數(shù)中出現(xiàn)空格等特殊字符時(shí)需要對(duì)參數(shù)進(jìn)行編碼,如下為使用
encodeURIComponent
對(duì)參數(shù)進(jìn)行編碼的示例。
標(biāo)簽傳參
//此處的 :URL 是動(dòng)態(tài)載入,參數(shù)是變量; //當(dāng)使用了 :URl 卻使用了靜態(tài)地址,有可能不生效,同樣如果使用了變量卻沒(méi)有用 :URL 也會(huì)有問(wèn)題 <navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"> </navigator>
頁(yè)面接收
// 在test.vue頁(yè)面接受參數(shù) onLoad: function (option) { const item = JSON.parse(decodeURIComponent(option.item)); }
二、上級(jí)頁(yè)面 ← 下級(jí)頁(yè)面(單向)
一般來(lái)說(shuō) uni.navigateTo 的參數(shù)傳遞可以滿足頁(yè)面的傳遞,但遇到需要更新上級(jí)頁(yè)面的需求時(shí),就需要使用uni. e m i t ( ) 和 u n i . emit()和uni. emit()和uni.on() 進(jìn)行頁(yè)面間通訊。
該方法一般運(yùn)用在當(dāng)你從下級(jí)頁(yè)面(或組件)改變數(shù)據(jù)后,通知上級(jí)頁(yè)面進(jìn)行刷新或其他操作,實(shí)在不清楚也沒(méi)關(guān)系,當(dāng)你需要時(shí)自然明白。
uni.$on(eventName,callback):監(jiān)聽事件
在上級(jí)頁(yè)面設(shè)置
uni.$emit()
來(lái)監(jiān)聽下級(jí)頁(yè)面的調(diào)用,其中的eventName就是事件名稱,第二個(gè)參數(shù)是接受到函數(shù)后觸發(fā)的回調(diào)函數(shù)。在監(jiān)聽事件結(jié)束后一定要移除監(jiān)聽事件,不然會(huì)有重復(fù)監(jiān)聽的問(wèn)題。
// 我的頁(yè)面 onLoad(){ // 監(jiān)聽事件 uni.$on('login',(usnerinfo)=>{ this.usnerinfo = usnerinfo; }) }, onUnload() { // 移除監(jiān)聽事件 uni.$off('login'); },
觸發(fā)事件
傳遞的參數(shù)一定是要在對(duì)象中的屬性
uni.$emit('login', { avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg', token: 'user123456', userName: 'unier', login: true });
三、上級(jí)頁(yè)面 ↔ 下級(jí)頁(yè)面(雙向)
在一般情況下,單向傳遞已經(jīng)可以滿足我們的業(yè)務(wù)需求,如向下級(jí)頁(yè)面?zhèn)鬟f需要顯示的參數(shù)、變動(dòng)的狀態(tài),向上級(jí)頁(yè)面?zhèn)鬟f的需要更新的數(shù)據(jù)或是需要再次調(diào)用的函數(shù)。
但遇到兩個(gè)聯(lián)系十分緊密的頁(yè)面時(shí),單向傳遞就無(wú)法滿足我們的業(yè)務(wù)需求,向下級(jí)頁(yè)面?zhèn)鬟f參數(shù)和監(jiān)聽事件就會(huì)顯得特別繁瑣。在uniapp中,它將上面兩種傳遞方式加以結(jié)合,提供了這樣一個(gè)方法去實(shí)現(xiàn)雙向傳遞:
uni.navigateTo({ event:{} })
上級(jí)頁(yè)面內(nèi)代碼
// 在起始頁(yè)面跳轉(zhuǎn)到test.vue頁(yè)面,并監(jiān)聽test.vue發(fā)送過(guò)來(lái)的事件數(shù)據(jù) uni.navigateTo({ url: 'pages/test?id=1', // 調(diào)用通信事件對(duì)象 events: { // 獲取下級(jí)頁(yè)面參數(shù): // 為指定事件添加一個(gè)監(jiān)聽器,獲取被打開頁(yè)面?zhèn)魉偷疆?dāng)前頁(yè)面的數(shù)據(jù) // 注意看下級(jí)頁(yè)面中所對(duì)應(yīng)的函數(shù)名,你可以定義多個(gè)方法去管理傳遞的參數(shù) acceptDataFromOpenedPage: function(data) { // 對(duì)數(shù)據(jù)做處理 console.log(data) }, someEvent: function(data) { // 對(duì)數(shù)據(jù)做處理 console.log(data) } }, // 發(fā)送通信方法 success: function(res) { // 通過(guò)eventChannel向被打開頁(yè)面?zhèn)魉蛿?shù)據(jù) // 其中含有兩個(gè)參數(shù),第一個(gè)是接收的函數(shù)名,第二個(gè)則是需要攜帶的參數(shù) res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' }) } })
下級(jí)頁(yè)面內(nèi)代碼
// 在test.vue頁(yè)面,向起始頁(yè)通過(guò)事件傳遞數(shù)據(jù) // 此方法不是一定要在 onLoad 內(nèi)調(diào)用,哪里需要哪里調(diào) onLoad: function(option) { // 此處聲明只是為了顯示看起來(lái)簡(jiǎn)潔一點(diǎn) const eventChannel = this.getOpenerEventChannel(); // emit 代表的就是向上一個(gè)頁(yè)面?zhèn)鬟f需要更新的數(shù)據(jù) eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'}); eventChannel.emit('someEvent', {data: 'data from test page for someEvent'}); // 接收上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù) // 監(jiān)聽acceptDataFromOpenerPage事件,獲取上一頁(yè)面通過(guò)eventChannel傳送到當(dāng)前頁(yè)面的數(shù)據(jù) eventChannel.on('acceptDataFromOpenerPage', function(data) { // 對(duì)數(shù)據(jù)做處理 console.log(data) }) }
總結(jié)
到此這篇關(guān)于uniapp頁(yè)面間傳參的幾種方法的文章就介紹到這了,更多相關(guān)uniapp頁(yè)面間傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Openlayers實(shí)現(xiàn)面積測(cè)量的方法
在Openlayers中,長(zhǎng)度和面積的測(cè)量均依賴ol/sphere模塊,長(zhǎng)度通過(guò)getLength方法計(jì)算,面積則通過(guò)getArea方法,面積測(cè)量不是計(jì)算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧2024-11-11js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JS實(shí)現(xiàn)服務(wù)五星好評(píng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)服務(wù)五星好評(píng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09JavaScript 監(jiān)控微信瀏覽器且自帶返回按鈕時(shí)間
這篇文章主要介紹了JavaScript 監(jiān)控微信瀏覽器且自帶返回按鈕時(shí)間的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...2007-05-05JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法,主要思路是通過(guò)CSS Media Queries改變一個(gè)類的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下2018-03-03JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js中利用cookie實(shí)現(xiàn)記住密碼功能
這篇文章主要為大家詳細(xì)介紹了js中利用cookie實(shí)現(xiàn)記住密碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10