uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off

目录
  • 注意事项
  • 使用场景
    • 1、在我的页面，监听事件
    • 2、在登录页，触发事件
  • 总结

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、在我的页面，监听事件

<template>
	<view class="content">
		<text v-if="usnerinfo">{{usnerinfo.userName}}</text>
		<button v-else @click="toLogin">去登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usnerinfo: null
			}
		},
		// 我的页面
		onLoad() {
			// 监听事件,使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。
			uni.$on('login', (usnerinfo) => {
				this.usnerinfo = usnerinfo;
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('login');
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/a/a'
				})
			},
		}
	}
</script>

因为事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听。

2、在登录页，触发事件

<template>
	<view class="content">
		<view class="data" @click="doLogin">触发方法，获取用户信息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usnerinfo: null
			}
		},
		// 我的页面
		onLoad() {},
		methods: {
			doLogin() {
				// 登陆页面
				uni.$emit('login', {
					userName: 'lzzzzzzzzzzzzzzzzzzzzz',
					login: true
				});
				uni.navigateBack({})
			}
		}
	}
</script>

使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。

总结

到此这篇关于uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off的文章就介绍到这了,更多相关uniapp uni.$emit uni.$on uni.$once uni.$off内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off

    目录 注意事项 使用场景 1.在我的页面,监听事件 2.在登录页,触发事件 总结 uni.$emit(eventName,OBJECT) 触发全局的自定义事件.附加参数都会传给监听器回调. uni.$on(eventName,callback) 监听全局的自定义事件.事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数. uni.$once(eventName,callback) 监听全局的自定义事件.事件可以由 uni.$emit 触发,但是只触发一次,在第一次触

  • javascript父子页面通讯实例详解

    本文实例讲述了javascript父子页面通讯的实现方法.分享给大家供大家参考.具体分析如下: 如果一个domain为 www.abc.com的页面内部包含一个name属性值为childFrame的iframe,并且这个iframe的domain为 static.abc.com.那么可以通过设置父页面的domain为abc.com,子页面的domain也为abc.com,然后实现父子页面通讯(我这里有点混淆父子页面和跨域的概念. 不采用上面的方法也是可以实现父子页面相互访问的. 方法是:在父页面

  • 浅谈uniapp页面跳转的解决方案

    浅谈uniapp页面跳转的解决方案

    目录 1.uniapp常用跳转API 2.微信小程序页面跳转API 3.其他页面跳转回tabbar页面的方法 4.页面来回跳转保持数据的方法 正常的页面跳转的api大家应该都清楚,但是涉及到多页面来回跳转以及返回到导航页的时候就需要一些技巧来进行处理,之前找了挺多文章也没有很详细的介绍,本文就详细说说页面跳转的那些事. 1.uniapp常用跳转API API 作用 uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面. uni.

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

  • uni-app如何页面传参数的几种方法总结

    uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat

  • uni-app常用的几种页面跳转方式总结

    目录 一.uni.navigateTo(OBJECT) 二.uni.navigateBack(OBJECT) 三.uni.redirectTo(OBJECT) 四.uni.switchTab(BOJECT) 五.openURL 补充:传值与接收 总结 一.uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面 uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io) method

  • 微信小程序webview与h5通过postMessage实现实时通讯的实现

    在做 React Native 应用时,如果需要在 App 里面内嵌 H5 页面,那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯,但是在小程序里面,虽然也提供了一个 webview 组件,但是,在进行 postMessage 通讯时,官方文档里面给出了一条很变态的说明: 网页向小程序 postMessage 时,会在特定时机(小程序后退.组件销毁.分享)触发并收到消息.e.detail = { data },data 是多次 postMess

  • Android 个人理财工具三：添加账单页面 上

    Android 个人理财工具三：添加账单页面 上

    ColaBox 登记收支记录终于进入了复杂阶段了.这个界面我也是查找了很多资料以及打开android的源代码看了后才完成了,现在想来Google的开源真是明智的啊. 从前面的登录页面跳转进入添加账单页面.这个页面主要是用来登记收支记录的.说白了就是往数据库录入明细. 表结构如下: db.execSQL("CREATE TABLE bills ("                  + "_ID INTEGER PRIMARY KEY," //id          

  • 微信小程序学习笔记之页面配置与路由方式

    最近在学习回顾小程序的开发,将一些学习结果做个笔记.参考微信小程序官方文档:developers.weixin.qq.com/miniprogram- 一.小程序配置 1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. // 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], &q

  • 微信小程序页面间传值的实现方法示例

    小程序页面间传值 大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然.那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.navigateTo,那这个event作用嘛就是可以接收,下一页返回回来的参数的.像

随机推荐