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

 更新时间:2022年09月07日 09:20:48   作者:佛佛ง  
uni-app 是一个使用vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于uniapp页面通讯之uni.$emit、uni.$on、uni.$once和uni.$off的相关资料,需要的朋友可以参考下

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现购物页面左右联动

    微信小程序实现购物页面左右联动

    这篇文章主要为大家详细介绍了微信小程序实现购物页面左右联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • xmlhttp缓存清除的2种解决方法

    xmlhttp缓存清除的2种解决方法

    这篇文章主要介绍了xmlhttp缓存清除的2种解决方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS使用正则表达式过滤多个词语并替换为相同长度星号的方法

    JS使用正则表达式过滤多个词语并替换为相同长度星号的方法

    这篇文章主要介绍了JS使用正则表达式过滤多个词语并替换为相同长度星号的方法,涉及javascript字符串与正则替换操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • Bootstrap Table使用整理(五)之分页组合查询

    Bootstrap Table使用整理(五)之分页组合查询

    这篇文章主要介绍了 Bootstrap Table使用整理(五)之分页组合查询的实例代码,非常报错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • JavaScript数据结构之栈实例用法

    JavaScript数据结构之栈实例用法

    在本篇文章里小编给大家分享了关于JavaScript数据结构之栈实例用法内容,有兴趣的朋友们学习下。
    2019-01-01
  • js实现点赞效果

    js实现点赞效果

    这篇文章主要为大家详细介绍了js实现点赞效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 一文详解e2e测试之cypress的使用

    一文详解e2e测试之cypress的使用

    这篇文章主要介绍了e2e测试之cypress的使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JavaScript中随机数方法 Math.random()

    JavaScript中随机数方法 Math.random()

    这篇文章主要介绍了JavaScript中随机数方法 Math.random(),文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • js简单粗暴的发布订阅示例代码

    js简单粗暴的发布订阅示例代码

    这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS实现可用滑块滑动的缓动图代码

    JS实现可用滑块滑动的缓动图代码

    这篇文章主要介绍了JS实现可用滑块滑动的缓动图代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论