当前栏目
[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页面的名称都一样 所以数据渲染混乱 这个时候把名字改成对应的就好了,
创作不易 如果对您有帮助 请留下赞再走吧
相关文章
- WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
- 从架构演进的角度聊聊Spring Cloud都做了些什么?
- SELinux 入门
- 如何快速部署Node.js项目
- 早该知道的7个JavaScript技巧
- 详解JavaScript中的this
- 可视化分析WEB访问:logstalgia
- 防御XSS攻击的七条原则
- 比较不同的 PaaS 平台上的 Node.js 支持
- 一些达成共识的JavaScript编码风格约定
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
- 网站盗链是什么?盗链与广告流量问题及如何防止
- 柏林纪行(中):Node.js Collaboration Summit
- 柏林纪行(下):JSConf EU
- jQuery技术内幕:深入解析jQuery架构设计与实现原理1
- jQuery技术内幕:深入解析jQuery架构设计与实现原理2
- 想做好互联网适老化设计,先搞定这3个方面!
- 为什么 NanoID 会取代 UUID
- Spring-Context注解源码之@EventListener
- 分布式部署那些事