Vue全局事件总线

最新推荐文章于 2024-09-09 11:08:24 发布

周怼怼

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量112

点赞数

分类专栏： study 学习笔记文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_43596906/article/details/120664841

版权

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

1、原理图：
全局事件组件原理图
假设D组件要给A组件发送一个数据，首先A组件需要为自定义组件X绑定一个自定义事件demo1，那么此时的demo1事件的回调就在A组件身上了，D组件再通过触发X组件的demo1事件并传递一个值即可。

注：X需要满足，首先不属于任何组件，其次要让所有组件都能看见，最后能调用$on/$off/$emit函数。
2、安装全局事件总线：

	new Vue({
		..........
		beforeCreate() {
			Vue.proptotype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
		},
		...........
	})

3、使用事件总线：
（1）、接收数据：A组件接收数据，则再A组件中给$bus绑定自定义事件，事件的回调留在A组件中

methods:{
		demo(data){
		}
}
.......
mounted(){
this.$bus.$on('xxxx',this.demo)
}

(2)、提供数据

	this.$bus.$emit('xxxx',数据)
	```

4、再beforDestory钩子函数中***解绑当前组件正在使用的事件***

关注