【uniapp触发全局自定义事件】

uniapp触发全局自定义事件

uni.$emit(eventName,OBJECT)

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

uni.$on(eventName,callback)

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

uni.$once(eventName,callback)

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

uni.$off([eventName, callback])

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

下方为演示代码,为了方便全放在一块了
//组件中使用
		
				点击传参
		
         methods:{
			share(){
				uni.$emit('事件名','参数');
			},
		},
		created() {
			uni.$on('事件名',res =>{
				console.log(res,'接收到的参数')
			})
		},
		 //注意:页面卸载后要及时销毁事件监听,不然下次再进来会触发多次!!!!!!
		destroyed() {
			uni.$off('nav1')
			uni.$off('IsFollow1')
		}
/
		//页面中使用
  		methods:{
				share(){
				uni.$emit('事件名','参数');
				},
		},
		onLoad(e) {
			uni.$on('事件名',res =>{
				console.log(res,'接收到的参数')
			});
			uni.$once('update',function(data){
				console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
			})
		},
		onUnload() {
	 //注意:页面卸载后要及时销毁事件监听,不然下次再进来会触发多次 如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
			uni.$off('事件名');
},

注意事项

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听
注意 uni.$on 定义完成后才能接收到 uni.$emit 传递的数据

uniapp链接:

https://uniapp.dcloud.io/api/window/communication.html#emit

你可能感兴趣的:(uniapp,javascript,前端,vue.js)