uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off

注意事项

• 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 就会监听到事件触发，在回调中去执行相关的逻辑。