uniapp 做项目页面通讯踩的坑，反思和总结

首先，先学习一下官网的页面通讯：

1.uni.$emit(eventName,OBJECT)

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

	uni.$emit('update',{msg:'页面更新'})
	//update 是触发的事件名，第二参数是携带的参数名。
	//触发全局的自定义事件。附加参数都会传给监听器回调。
	//反思总结：
		1.这里的update事件名不要写死，最好由外面使用的人传进来，这样别人也不用看里面绑定的事件名，直接自己写名字，自己调名字。
		2.这里携带出去的数据最好是一个对象，不要为了一个功能需要什么就返什么，因为后期很可能用到其他字段。
		3.相同事件名，后期很可能不同地方都需要调用到，这会触发很多地方的事件

2.uni.$on(eventName,callback)

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})
//监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
//第一个参数上面emit里面绑定的事件名，第二个参数是个回调函数
//反思总结：
	1.一定要记得销毁！！！不销毁，会导致重复触发。

另外还有两个Api一同记录

3.uni.$once(eventName,callback)

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

	uni.$once('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})
//	监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

4.uni.$off([eventName, callback])

属性	类型	描述
eventName	Array＜String＞	事件名
callback	Function	事件的回调函数

说明：

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

	<script>
		export default {
			data() {
				return {
					
				}
			},
			mounted(){
				uni.$on('customDeptLog',this.selectedDept);
				uni.$on('customStaffLog',this.selectedStaff);
	        },
			beforeDestory(){
				uni.$off('customDeptLog',this.selectedDept)
				uni.$off('customStaffLog',this.selectedStaff)
			},
			methods: {
				selectedDept(res){
					console.log(res)
				},
				selectedStaff(res){
					console.log(res)
				},
			}
		}
	</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>

注意事项

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听