一、需求是這樣的：

現(xiàn)在需要點(diǎn)擊首頁(yè)循環(huán)出來(lái)的列表中其中一項(xiàng)，點(diǎn)擊后我們要讓他帶著參數(shù)跳轉(zhuǎn)到另外一個(gè)頁(yè)面。因?yàn)榱斜碇械臄?shù)據(jù)都是用v-for循環(huán)出來(lái)的，所以點(diǎn)擊每項(xiàng)傳遞的參數(shù)都是不同的。

1、用uni.navigateTo中的url拼接傳參

此時(shí)假設(shè)我們用到的頁(yè)面跳轉(zhuǎn)方式是uni.navigateTo，如果要帶參數(shù)跳轉(zhuǎn)，那么可以在url的后面拼接上我們需要的參數(shù)就行，如下面代碼段所示

//在首頁(yè)傳遞參數(shù)
uni.navigateTo({
					url: `/subPackages/foodsafety/safetyTrainRules?id=${id}`,
					animationType: 'pop-in',
					animationDuration: 300
				});

//在跳轉(zhuǎn)頁(yè)面接收參數(shù)
onLoad(data){
            console.log(data)
            }

但是現(xiàn)在的傳參僅限于比較短的參數(shù)，太長(zhǎng)的參數(shù)用拼接的方法會(huì)傳遞失敗，因?yàn)檫@種方法有長(zhǎng)度限制。

所以假如現(xiàn)在我們需要傳遞一個(gè)很長(zhǎng)的富文本參數(shù)就不能再使用上面的這個(gè)方法了，需要采取另外一個(gè)方法：

2、長(zhǎng)參數(shù)或者對(duì)象等用uni.$emit()和uni.$on()傳遞參數(shù)

uni.$emit('data',data)
uni.$on('data',function(data){})

uni.$emit和uni.$on都是uniapp官方提供的api，可以用來(lái)跨頁(yè)面、跨組件通訊

這次想記錄也就是因?yàn)樵谶@里碰到了坑！原本我以為只要按著這個(gè)順序用下來(lái)就好了，在首頁(yè)用$emit傳參數(shù)，在跳轉(zhuǎn)的頁(yè)面用$on接收參數(shù)就行了，結(jié)果就是我天真了

1. 首先碰到的第一個(gè)問(wèn)題，是關(guān)于在uni.$on()中的回調(diào)函數(shù)的指向問(wèn)題，如果這樣寫（在文中跳轉(zhuǎn)的頁(yè)面就是接收參數(shù)的頁(yè)面）

   //跳轉(zhuǎn)的頁(yè)面中
   export default {
   		data() {
   			return {
   				content: ''
   }
   },
   onLoad(){
        uni.$on('data',function(data){ 
        console.log(this.content) //undefined
   })
   }
   }

   在控制臺(tái)中會(huì)打印undefined,這是因?yàn)榇藭r(shí)this的指向不對(duì)
   解決辦法(1):?改成箭頭函數(shù)以后就就能解決了

   //跳轉(zhuǎn)的頁(yè)面中
   export default {
   		data() {
   			return {
   				content: '1'
   }
   },
   onLoad(){
        uni.$on('data'，(data)=>{ 
        console.log(this.content) //1
   })
   }
   }

   
   解決辦法(2):
   既然知道是this指向問(wèn)題，那就把我們需要的this給“請(qǐng)”進(jìn)去就好了

   //跳轉(zhuǎn)的頁(yè)面中
   export default {
   		data() {
   			return {
   				content: '1'
   }
   },
   onLoad(){
   let that = this
        uni.$on('data'，function(data){ 
        console.log(that.content) //1
   })
   }
   }

2. 第二個(gè)問(wèn)題就是$emit和$on定義順序問(wèn)題

   ?

   在用$emit攜帶參數(shù)跨頁(yè)面時(shí),在跳轉(zhuǎn)的頁(yè)面里面發(fā)現(xiàn)第一次進(jìn)入的時(shí)候并沒(méi)有觸發(fā)uni.$on（看控制臺(tái)打印得知，第一次進(jìn)入的時(shí)候不打印，回退到原來(lái)的頁(yè)面后再次點(diǎn)擊進(jìn)入跳轉(zhuǎn)頁(yè)面打?。?，這就是因?yàn)閡ni.$on還沒(méi)有定義完成，因此也就沒(méi)有接收到$emit傳遞的數(shù)據(jù)（之前都沒(méi)有打開過(guò)的頁(yè)面怎么可能定義好啊喂！），下面提供兩種解決方法
   
   第一次跳轉(zhuǎn)不生效寫法

   //首頁(yè)
   uni.$emit('richtext', content)

   //跳轉(zhuǎn)頁(yè)面
   	uni.$on('richtext', (data) => {
   				console.log(data);		
   			})

? ? ? ? 解決辦法(1):嵌套寫法

//在首頁(yè)中

uni.$on('richtext1', function() {
					uni.$emit('richtext', content)

				})

//在要跳轉(zhuǎn)入的頁(yè)面中

uni.$on('richtext', (data) => {
				console.log(data);
			})
			uni.$emit('richtext1')

? ? ? ? 解決辦法(2)：用定時(shí)器延遲$emit的使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-632050.html

//首頁(yè)
setTimeout(()=>{
					uni.$emit('richtext', content)
				},300)

//跳轉(zhuǎn)頁(yè)面
	uni.$on('richtext', (data) => {
				console.log(data);		
			})

總之有遇到這個(gè)問(wèn)題的一般是用的navigateTo帶參數(shù)去跳轉(zhuǎn)頁(yè)面，后面稍微查了一下有兩個(gè)跳轉(zhuǎn)是可以正常用$emit和$on去傳值的，不會(huì)出這么多幺蛾子 1.uni.switchTab， 2.uni.navigateBack

上文這些方法都是自己有試過(guò)的，心得就是this指向還是得多加理解 最后就是一定要記得在離開頁(yè)面后移除監(jiān)聽事件?。?/h2>

//跳轉(zhuǎn)的頁(yè)面中
onUnload() {
			uni.$off('data')
		},

到了這里，關(guān)于uniapp在不同頁(yè)面間跳轉(zhuǎn)時(shí)使用$emit和$on傳值無(wú)效問(wèn)題（記錄坑）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！