uni.$emit(eventName,OBJECT)

Trigger global custom event. Additional parameters are passed to the listener callback.

Attribute	Type	Describe
eventName	String	Event name
OBJECT	Object	Additional parameters carried by triggering events

Code example

	uni.$emit('update',{msg:'page update'})

uni.$on(eventName,callback)

Listen to global custom events. Events can be triggered by uni.$emit, and the callback function receives all the additional parameters of the incoming event trigger function.

Attribute	Type	Describe
eventName	String	Event name
callback	Function	Event callback function

Code example

	uni.$on('update',function(data){
		console.log('it is listened that the event comes from update, with parameter msg as:' + data.msg);
	})

uni.$once(eventName,callback)

Listen to global custom events. Events can be triggered by uni.$emit, but only once. Remove the listener after the first trigger.

Attribute	Type	Describe
eventName	String	Event name
callback	Function	Event callback function

Code example

	uni.$once('update',function(data){
		console.log('it is listened that the event comes from update, with parameter msg as:' + data.msg);
	})

uni.$off([eventName, callback])

Remove the global custom event listener.

Attribute	Type	Describe
eventName	Array＜String＞	Event name
callback	Function	Event callback function

Tips

• If no parameters are provided, remove all event listeners;
• If only the event is provided, remove all listeners of the event;
• If both event and callback are provided, only the listener of this callback will be removed;
• The provided callback must be the same one as the callback of $on to remove the listener of this callback;

Code example

$emit, $on and $off are commonly used for cross-page and cross-component communication, and are placed on the same page for easy demonstration

	<template>
		<view class="content">
			<view class="data">
				<text>{{val}}</text>
			</view>
			<button type="primary" @click="comunicationOff">End listening to</button>
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					val: 0
				}
			},
			onLoad() {
				setInterval(()=>{
					uni.$emit('add', {
						data: 2
					})
				},1000)
				uni.$on('add', this.add)
			},
			methods: {
				comunicationOff() {
					uni.$off('add', this.add)
				},
				add(e) {
					this.val += e.data
				}
			}
		}
	</script>
	
	<style>
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.data {
			text-align: center;
			line-height: 40px;
			margin-top: 40px;
		}
	
		button {
			width: 200px;
			margin: 20px 0;
		}
	</style>
	

Precautions

• The events triggered by uni.$emit, uni.$on, uni.$once and uni.$off are all at the App global level, spanning arbitrary component, page, nvue, vue, etc.
• When using, remember to destroy event listening to in time, for example, uni.$on registered listening to in the page onLoad, uni.$off removed in the page onUnload, or one-off events that use uni.$once to listen to directly