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

