When uniapp jumps between different pages, using $emit and $on to pass values is invalid (record pit)

1. The requirements are as follows:

Now we need to click one of the items in the list that is looped out on the home page. After clicking, we need to let him jump to another page with parameters. Because the data in the list is looped out by v-for, the parameters passed by clicking each item are different.

1. Use the url in uni.navigateTo to splicing and passing parameters

At this point, assume that the page jump method we use is uni.navigateTo. If you want to jump with parameters, you can splice the parameters we need after the url, as shown in the following code segment

//在首页传递参数
uni.navigateTo({
					url: `/subPackages/foodsafety/safetyTrainRules?id=${id}`,
					animationType: 'pop-in',
					animationDuration: 300
				});

//在跳转页面接收参数
onLoad(data){
            console.log(data)
            }

However, the current parameter passing is limited to relatively short parameters, and parameters that are too long will fail to be passed by splicing, because this method has a length limit.

So if we need to pass a long rich text parameter now, we can no longer use the above method, and we need to adopt another method:

2. Use uni.$emit() and uni.$on() to pass parameters for long parameters or objects

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

Both uni.$emit and uni.$on are official APIs provided by uniapp, which can be used for cross-page and cross-component communication

I want to record this time because I encountered a pit here! Originally, I thought it would be fine to use it in this order. Use $emit to pass parameters on the home page, and use $on to receive parameters on the redirected page. The result is that I am naive.

1. The first problem I encountered is about the pointing of the callback function in uni.$on(), if it is written like this (the page that jumps in the text is the page that receives the parameters)

   //跳转的页面中
   export default {
   		data() {
   			return {
   				content: ''
   }
   },
   onLoad(){
        uni.$on('data',function(data){ 
        console.log(this.content) //undefined
   })
   }
   }

   Undefined will be printed in the console, this is because the direction of this is wrong at this time
   Solution (1):  After changing to an arrow function, it can be solved

   //跳转的页面中
   export default {
   		data() {
   			return {
   				content: '1'
   }
   },
   onLoad(){
        uni.$on('data'，(data)=>{ 
        console.log(this.content) //1
   })
   }
   }

   
   Solution (2):
   Now that you know that this points to the problem, just enter the this we need into "please"

   //跳转的页面中
   export default {
   		data() {
   			return {
   				content: '1'
   }
   },
   onLoad(){
   let that = this
        uni.$on('data'，function(data){ 
        console.log(that.content) //1
   })
   }
   }

2. The second problem is the definition order of $emit and $on

    

   When using $emit to carry parameters across pages, it was found in the jump page that uni.$on was not triggered when entering for the first time (see the console print, it does not print when entering for the first time, and falls back to After the original page, click again to enter the jump page to print), this is because uni.$on has not been defined yet, so the data passed by $emit has not been received (how can a page that has not been opened before be defined well? !), the following provides two solutions:
   
   the first jump does not take effect

   //首页
   uni.$emit('richtext', content)

   //跳转页面
   	uni.$on('richtext', (data) => {
   				console.log(data);		
   			})

        Solution (1): nested writing

//在首页中

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

				})

//在要跳转入的页面中

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

        Solution (2): Use a timer to delay the use of $emit

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

//跳转页面
	uni.$on('richtext', (data) => {
				console.log(data);		
			})

In short, if you encounter this problem, you usually use navigateTo with parameters to jump to the page. After a little checking, there are two jumps that can normally use $emit and $on to pass values, and there will not be so many moths.
1. uni. switchTab,
2. uni. navigateBack

The above methods are all tried by myself, and the experience is that this point should be more understood.
Finally, you must remember to remove the listening event after leaving the page! !

//跳转的页面中
onUnload() {
			uni.$off('data')
		},