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
使用
案例使用看https://ask.dcloud.net.cn/article/36010
个人总结
uni. e m i t 、 u n i . emit、 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的使用及踩坑实战的文章就介绍到这了,更多相关uniapp跨页面传值uni.$emit和uni.$on内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript定义变量时带var与不带var的区别分析
这篇文章主要介绍了javascript定义变量时带var与不带var的区别,以一个简单实例分析了变量定义时带var与不带var的执行原理及用法区别,需要的朋友可以参考下2015-01-01
昨天在公司内部做了一个小小的技术分享，就 js 应用开发方面跟大家谈了一点自己的心得，最近因为工作关系花在这上面的时间较多也颇有些收获，写在这里备忘。2009-12-12
如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响
如果要完整解决该缩放和布局问题,仍需适配,下面这篇文章主要给大家介绍了关于如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了webpack学习--webpack经典7分钟入门教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了原生JS实现拖拽图片效果，JS实现图标图拖拽，拖拽的过程中不断输出该div的left、top值，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要为大家详细介绍了Javascript实现简易天数计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
网址urlencode加密函数，主要用于中文目录2008-06-06
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
今天小编就为大家分享一篇layui使用button按钮 点击出现弹层 弹层中加载表单的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
javascript数组中的slice方法和join方法
这篇文章主要介绍了 javascript数组中的slice方法和join方法，文章内容介绍详细，具有一的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
这篇文章主要介绍了JS模拟按钮点击功能的方法,结合实例形式分析了JavaScript模拟点击按钮事件的实现技巧,并附带了JavaScript模拟点击链接的实现方法,需要的朋友可以参考下2015-12-12
最新评论