uniapp跨页面传值uni.$emit和uni.$on怎么使用

发布时间:2023-04-26 10:35:03 作者:iii
来源:亿速云 阅读:214

这篇文章主要介绍“uniapp跨页面传值uni.$emit和uni.$on怎么使用”,在日常操作中,相信很多人在uniapp跨页面传值uni.$emit和uni.$on怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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页面的名称都一样   所以数据渲染混乱   这个时候把名字改成对应的就好了

补充知识:uni.$emit、 uni.$on 、 uni.$once 、uni.$off的使用

介绍

看官方文档https://uniapp.dcloud.io/collocation/frame/communication?id=emit

或者直接在uni-app官方网站直接搜uni. e m i t 、 u n i . emit、 uni. emit、uni.on 、 uni. o n c e 、 u n i . once 、uni. once、uni.off

使用

uniapp跨页面传值uni.$emit和uni.$on怎么使用

官方总结

uni. emit 、 uni.emit、 uni. emit、uni.on 、 uni. once 、 uni . once 、uni. once、uni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等

使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni. on注 册 监 听 , onUnload 里 边uni . on注册监听,onUnload 里边 uni. on注册监听,onUnload里边uni.off 移除,或者一次性的事件,直接使用 uni.$once 监听

到此,关于“uniapp跨页面传值uni.$emit和uni.$on怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
  2. Uniapp使用GoEasy实现websocket实时通讯

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

uniapp

上一篇:Netty核心类及其作用是什么

下一篇:go怎么通过benchmark对代码进行性能测试

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》