[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法以及遇到的坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了[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页面的名称都一样所以数据渲染混乱这个时候把名字改成对应的就好了，

创作不易如果对您有帮助请留下赞再走吧文章来源地址https://www.toymoban.com/news/detail-782223.html

到了这里，关于[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法以及遇到的坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！