欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp頁(yè)面間傳參的幾種方法實(shí)例總結(jié)

 更新時(shí)間:2022年12月22日 09:17:27   作者:Brod_Roy  
在進(jìn)行頁(yè)面的跳轉(zhuǎn)的時(shí)候,往往需要我們將一些參數(shù)攜帶著傳遞過(guò)去,下面這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面間傳參的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在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í),這里只做傳參分享。

官方文檔:uni.navigateTo(OBJECT)

攜帶靜態(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)文章

最新評(píng)論