您现在的位置是:网站首页> 编程资料编程资料
uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off_javascript技巧_
2023-05-24
448人已围观
简介 uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off_javascript技巧_
uni.$emit(eventName,OBJECT) | 触发全局的自定义事件。附加参数都会传给监听器回调。 |
uni.$on(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。 |
uni.$once(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。 |
uni.$off([eventName, callback]) | 移除全局自定义事件监听器。 |
注意事项
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
- 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听
使用场景
进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。
1、在我的页面,监听事件
{{usnerinfo.userName}}
因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。
2、在登录页,触发事件
触发方法,获取用户信息
使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。
总结
到此这篇关于uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off的文章就介绍到这了,更多相关uniapp uni.$emit uni.$on uni.$once uni.$off内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- JavaScript中强大的操作符使用详解_javascript技巧_
- 关于Element-UI Table 表格指定列添加点击事件_vue.js_
- Vue基础popover弹出框编写及bug问题分析_vue.js_
- element-ui配合node实现自定义上传文件方式_vue.js_
- redux功能强大的Middleware中间件使用学习_React_
- 如何在ElementUI的上传组件el-upload中设置header_vue.js_
- 微信小程序实现活动报名登记功能(实例代码)_javascript技巧_
- 解析Clipboard API剪贴板操作实例_JavaScript_
- React Hooks useReducer 逃避deps组件渲染次数增加陷阱_React_
- 使用vue-router切换组件时使组件不销毁问题_vue.js_
