[uniapp] How to use uni.$emit and uni.$on to pass values across pages and the pitfalls encountered

uni.$emit and uni.$on are cross-page value transfers that come with uniapp   

Vue parent-child communication can use props this.$emit This simple parent-child communication is suitable for passing values ​​between pages and components or between components, it is not suitable for passing values ​​between pages

To achieve page communication, let’s take a look at how to use uni.$emit and uni.$on

Example:

        A page uses uni.$on('custom name', function(data){} in onload to receive data as the received value

        Page B uses uni.$emit('custom name',{property name: property value}) in the event and uses uni.navigateBack to jump back to page A. The custom name of page A should be the same as that of page B.

code:

        A page

//  A  页面

export default {
    data(){
        return{

        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  为 B 页面传过来的值
        )}
    },
}

        B page

//  B  页面

export default {
    data(){
        return{
            listData：[1,2,3,4,5]
        };
    },
    methods:{
        jump(){
            uni.$emit('add',{listData:this.listData})
            uni.navigateBack({
	            delta: 1 
			});
        },
    },
}

In this way, the communication between the page and the page is realized    

But but but (important!!! Knock on the blackboard)

 Both uni.$emit and uni.$on belong to global cross-page parameter passing

So on page A, add remove listener event in onUnload cycle

  uni.$off('custom name');

//  A  页面

export default {
    data(){
        return{

        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  为 B 页面传过来的值
        )}
    },
    onUnload() {  
      // 移除监听事件  
         uni.$off('add');  
	},
}

The above solves the uniapp cross-page parameter transfer

Let me share with you the pitfalls encountered by bloggers when using uni.$emit and uni.$on

Both page A and page B call page C at the same time and use uni.$on and have the same name

The C page return method uses uni.$on and also uses uni.navigateBack 

A page code   

//  A  页面

export default {
    data(){
        return{

        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  为 C 页面传过来的值
        )}
    },
    onUnload() {  
      // 移除监听事件  
         uni.$off('add');  
	},
    methods：{
        //  A 页面 跳转B页面 
        jumpB(){
             uni.navigateTo({
		        url:'B'
		     })
        },
        //   A 页面 跳转C页面
        jumpC(){
             uni.navigateTo({
		        url:'C'
		     })
        },
    }，
}

B page code

//  B  页面

export default {
    data(){
        return{

        };
    },
    onload(){
        uni.$on('add',function(res){
            console.log(res.listData)    //  为 C 页面传过来的值
        )}
    },
    onUnload() {  
      // 移除监听事件  
         uni.$off('add');  
	},
    methods：{
        //   B 页面 跳转C页面
        jumpC(){
             uni.navigateTo({
		        url:'C'
		     })
        },
    }，
}

C page

//  C 页面

export default {
    data(){
        return{
            listData：[1,2,3,4,5]
        };
    },
    methods:{
        jump(){
            uni.$emit('add',{listData:this.listData})
            uni.navigateBack({
	            delta: 1 
			});
        },
    },
}

  When page A jumps to page B, page B jumps to page C, page A jumps to page B, and then page B jumps to page C

Solution: The names of the AB pages are all the same, so the data rendering is confusing. At this time, just change the name to the corresponding one.

It is not easy to create. If it is helpful to you, please leave a like before leaving.