文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。

uni.$off([eventName, callback])

移除全局自定义事件监听器。

注意事项

使用场景

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯