亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

前言

在Uniapp中的傳參主要分為以下三種類型:

上級頁面 → 下級頁面(單向)上級頁面 ← 下級頁面(單向)上級頁面 ↔ 下級頁面(雙向)

本文將圍繞這三種傳參展開,分享其使用方法以及我使用中所遇到的問題與解決方法。

一、上級頁面 → 下級頁面(單向)

uni.navigateTo:URL編程式傳參

作為最常用也是最簡單的跳轉(zhuǎn)攜帶參數(shù)的API,這里不多贅述,想詳細(xì)了解的朋友可以前往官方文檔學(xué)習(xí),這里只做傳參分享。

官方文檔:uni.navigateTo(OBJECT)

攜帶靜態(tài)參數(shù)

//在起始頁面跳轉(zhuǎn)到test.vue頁面并傳遞參數(shù)
//作用場景,需要提供固定傳參狀態(tài)的頁面,一般和動態(tài)參數(shù)一起使用
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

攜帶動態(tài)參數(shù)

//在起始頁面跳轉(zhuǎn)到test.vue頁面并傳遞參數(shù)
let uniapp = {
    uniappItem: 0,
};
//當(dāng)傳遞的參數(shù)是對象時,必須先轉(zhuǎn)化為JSON格式
uni.navigateTo({
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

頁面接收

// 在test.vue頁面接受參數(shù)
export default {
	onLoad: function (option) { //option為object類型,會序列化上個頁面?zhèn)鬟f的參數(shù)
		console.log(option.id); //打印出上個頁面?zhèn)鬟f的參數(shù)。
		console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。
	}
}

<navigator>標(biāo)簽傳參

URL有長度限制,太長的字符串會傳遞失敗,可改用窗體通信全局變量,另外參數(shù)中出現(xiàn)空格等特殊字符時需要對參數(shù)進(jìn)行編碼,如下為使用encodeURIComponent對參數(shù)進(jìn)行編碼的示例。

標(biāo)簽傳參

//此處的 :URL 是動態(tài)載入,參數(shù)是變量;
//當(dāng)使用了 :URl 卻使用了靜態(tài)地址,有可能不生效,同樣如果使用了變量卻沒有用 :URL 也會有問題
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>

頁面接收

// 在test.vue頁面接受參數(shù)
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

二、上級頁面 ← 下級頁面(單向)

一般來說 uni.navigateTo 的參數(shù)傳遞可以滿足頁面的傳遞,但遇到需要更新上級頁面的需求時,就需要使用uni. e m i t ( ) 和 u n i . emit()和uni. emit()和uni.on() 進(jìn)行頁面間通訊。

該方法一般運(yùn)用在當(dāng)你從下級頁面(或組件)改變數(shù)據(jù)后,通知上級頁面進(jìn)行刷新或其他操作,實(shí)在不清楚也沒關(guān)系,當(dāng)你需要時自然明白。

uni.$on(eventName,callback):監(jiān)聽事件

在上級頁面設(shè)置 uni.$emit() 來監(jiān)聽下級頁面的調(diào)用,其中的eventName就是事件名稱,第二個參數(shù)是接受到函數(shù)后觸發(fā)的回調(diào)函數(shù)。在監(jiān)聽事件結(jié)束后一定要移除監(jiān)聽事件,不然會有重復(fù)監(jiān)聽的問題。

// 我的頁面  
onLoad(){  
    // 監(jiān)聽事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除監(jiān)聽事件  
    uni.$off('login');  
},

觸發(fā)事件

傳遞的參數(shù)一定是要在對象中的屬性

uni.$emit('login', {  
	avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
	token: 'user123456',  
	userName: 'unier',  
	login: true  
});

三、上級頁面 ↔ 下級頁面(雙向)

在一般情況下,單向傳遞已經(jīng)可以滿足我們的業(yè)務(wù)需求,如向下級頁面?zhèn)鬟f需要顯示的參數(shù)、變動的狀態(tài),向上級頁面?zhèn)鬟f的需要更新的數(shù)據(jù)或是需要再次調(diào)用的函數(shù)。

但遇到兩個聯(lián)系十分緊密的頁面時,單向傳遞就無法滿足我們的業(yè)務(wù)需求,向下級頁面?zhèn)鬟f參數(shù)和監(jiān)聽事件就會顯得特別繁瑣。在uniapp中,它將上面兩種傳遞方式加以結(jié)合,提供了這樣一個方法去實(shí)現(xiàn)雙向傳遞:uni.navigateTo({ event:{} })

上級頁面內(nèi)代碼

// 在起始頁面跳轉(zhuǎn)到test.vue頁面,并監(jiān)聽test.vue發(fā)送過來的事件數(shù)據(jù)
uni.navigateTo({
  url: 'pages/test?id=1',
  // 調(diào)用通信事件對象
  events: {
    // 獲取下級頁面參數(shù):
    // 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)
    // 注意看下級頁面中所對應(yīng)的函數(shù)名,你可以定義多個方法去管理傳遞的參數(shù)
    acceptDataFromOpenedPage: function(data) {
      // 對數(shù)據(jù)做處理
      console.log(data)
    },
    someEvent: function(data) {
      // 對數(shù)據(jù)做處理
      console.log(data)
    }
  },
  // 發(fā)送通信方法
  success: function(res) {
    // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
    // 其中含有兩個參數(shù),第一個是接收的函數(shù)名,第二個則是需要攜帶的參數(shù)
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

下級頁面內(nèi)代碼

// 在test.vue頁面,向起始頁通過事件傳遞數(shù)據(jù)
// 此方法不是一定要在 onLoad 內(nèi)調(diào)用,哪里需要哪里調(diào)
onLoad: function(option) {
  // 此處聲明只是為了顯示看起來簡潔一點(diǎn)
  const eventChannel = this.getOpenerEventChannel();
  // emit 代表的就是向上一個頁面?zhèn)鬟f需要更新的數(shù)據(jù)
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 接收上個頁面?zhèn)鬟f的數(shù)據(jù)
  // 監(jiān)聽acceptDataFromOpenerPage事件,獲取上一頁面通過eventChannel傳送到當(dāng)前頁面的數(shù)據(jù)
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    // 對數(shù)據(jù)做處理
    console.log(data)
  })
}

總結(jié)

到此這篇關(guān)于uniapp頁面間傳參的幾種方法的文章就介紹到這了,更多相關(guān)uniapp頁面間傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論