uni app 跨域（[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑）

uni.$emit 和 uni.$on 是uniapp自带的跨页面传值   

vue 父子通讯可以用 props  this.$emit   这种简单的父子通讯紧适用于 页面和组件 或者 组件之间的传值    
    
    
，他并不适用于页面和页面的互相传值

那要实现页面通讯呢   


     


     


    ，我们一起来看看uni.$emit 和 uni.$on的使用方法

示例：

        A页面在 onload 中使用   uni.$on(自定义名称,function(data){}   接收   data为接收到的值

        B页面在事件中  使用    uni.$emit(自定义名称,{属性名称 : 属性值}) 并搭配使用 uni.navigateBack 跳回A页面     A页面的自定义名称要和B页面的自定义名称相同

代码：

        A    页面

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

        B   页面

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

这样就实现的页面和页面之间的通讯    

但是  但是  但是 （重点！！！敲黑板）

 uni.$emit 和 uni.$on 都属于全局跨页面传参

所以在A页面  在 onUnload 周期 添加移除监听事件

  uni.$off(自定义名称);

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

以上就解决了uniapp 跨页面传参

下面和大家分享一下  博主在使用uni.$emit 和 uni.$on 遇到的大坑

A页面 和 B 页面同时都 调用了 C页面 并且使用了uni.$on 并且名字是一样的

C页面 返回是方法  使用了  uni.$on 同时也使用了 uni.navigateBack 

A页面代码   

// 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页面代码

// 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 页面

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

  当A页面跳B页面   B页面跳到C页面          在A页面跳转到B页面然后B页面跳转到C页面  C页面修改完数据之后 AB页面的值都发生了改变

解决方法：AB页面的名称都一样   所以数据渲染混乱   这个时候把名字改成对应的就好了    

     

     

   ，

创作不易   如果对您有帮助 请留下赞再走吧