【uni-app】2-1 uniapp & vue 事件总线

最新推荐文章于 2024-05-17 10:59:47 发布

疾风小蜗牛

最新推荐文章于 2024-05-17 10:59:47 发布

阅读量851

点赞数

分类专栏： uni-app 前端文章标签： vue.js uni-app javascript

本文链接：https://blog.csdn.net/Wr2138/article/details/127560584

版权

本文介绍了uni-app和vue的事件总线机制，包括uniapp中的uni.$on(), uni.$emit(), uni.$once()和uni.$off()的使用，以及事件总线的注意事项和在vue中的实现方式。强调了事件总线在简单组件间通信中的应用，但在大型项目中推荐使用Vuex进行状态管理。" 110504692,10294799,Python3爬取酷狗音乐TOP500信息并存储到MongoDB,"['Python爬虫', '数据抓取', 'MongoDB数据库', '网络爬虫', '音乐信息']

摘要由CSDN通过智能技术生成

组件之间的传参方法有：父传子、子传父、缓存、vuex、ref、事件总线。接下来就是对事件总线的介绍

一、什么是事件总线

事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。（也就是说：简单的两三个组件之间需要传参时使用事件总线还可以，但是一旦多了就不好管理。所以，当开发大型项目并且页面之间传递比较复杂时，还是使用vuex比较合适）

二、uniapp中的事件总线

1、监听事件 uni.$on()

uni.$on(eventName,callback)

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

当然，该方法中的回调函数不使用匿名函数也是可以的

代码示例：

			// 注册事件
			uni.$on('updata',(data)=>{
				console.log('现在在使用事件总线进行数据传输，从son2传到son1的：'+data.msg);
					this.msg = data.msg
			})
			
			// 下面这种情况并不会使vue实例中的msg进行改变，原因是this的原因
			console.log(this);   // 这个this指向的是 VueComponent {}
			// uni.$on('updata',function(data){
			// 	console.log(this);   // 这个this指向的是  Vue {}
			// 	console.log('现在在使用事件总线进行数据传输，从son2传到son1的：'+data.msg);
			// 		this.msg = data.msg
			// })