Using Vue3 for uniapp project, how to use eventChannel on the next page

uniapp project, use push to jump to the page, return to the problem

In the uniapp project, push is used to jump to the page, but there will be a problem when returning for the second time. One more page will be returned. Check the state of the page through the router. The front and back pages of the page are normal, but you can check the page stack through getCurrentPages(). You will find that one page is missing, causing problems when returning for the second time.

reason:

The specific reason is not clear. It may be that the page stack of uniapp and the page stack of vue are different.

Solution:

Use uniapp's page jump method (uni.navigateTo(), etc.).

Using Vue3 for uniapp project, how to use eventChannel on the next page

It is troublesome to use uni.navigateTo() to pass parameters. There are two delivery methods mentioned on the official website, one is splicing in the URL, and the other uses eventChannel to transmit data to the opened page.

Because the data passed is an object, the first method is not practical to use splicing transmission. The second method needs to use this, but the project uses vue3 and does not have this.

I found that netizens said that getCurrentInstance can be introduced into vue .
Insert image description here

Then use the following statement to get the eventChannel object on the receiving page

const instance = getCurrentInstance().proxy  
const eventChannel = instance.getOpenerEventChannel(); 

I tried the above method without success (maybe there is something wrong with my writing method) and the Vue official website does not recommend using getCurrentInstance as this , so this method is deprecated.

Later, I used the event bus, but it also failed. There was a problem of data delay.

The final solution:
use the getApp().globalData .cache = {data} method to pass parameters, and use getApp().globalData.cache to obtain data on the next page.

Send data before jump:
Insert image description here
Receive data after jump:
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_46683645/article/details/127277600