自定义系列之Vue全局事件总线

最新推荐文章于 2024-07-08 22:26:45 发布

Zdde_

最新推荐文章于 2024-07-08 22:26:45 发布

阅读量592

点赞数 2

分类专栏： JavaScript 前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_43213137/article/details/113857167

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

自定义全局事件总线对象模块

解决Vue中多重组件嵌套以及兄弟组件之间传值问题

Vue中以及提供了解决方案为什么还要自定义呢？

答：模仿Vue的实现方式自己来完成功能，能够提高我们编程思维，从设计的角度出发，往往能让我们更清楚底层逻辑实现。提高我们的编码质量。

模仿 $on $emit $off

首先，我们看看vue中要是使用这些方法，该如何使用。应该明确的是，这些方法一般用在组件中。

//父组件
mounted(){
	this.$on('add',this.addHandle)

}
methods:{
	addHandle(data){
		console.log(data)
	}
}

//子组件
methods:{
	addMethod(data){
		this.$emit('add',data)
	}
}
beforeDestroy(){
	this.$off('add')
}

通过上面的例子，我们分析一下vue中事件监听和分发以及移除。如果我们想要自己模仿on emit off方法，就要知道是谁调用它的，在组件中是通过this调用，那么this是谁？我们在控制台打印一下它，发现this是VueComponent实例对象，这个实例对象中有on emit off 这些方法吗？显然没有。读过vue官方文档的都知道，这些$ 开头的方法都是vm的下面的，vm是什么？vm是new Vue 出来的，也就是Vue构造函数的实例对象，显然这些$开头的方法是挂载在Vue.prototype对象上的。而，VueComponent的隐式原型对象指向了Vue的实例对象，这里就是原型链继承了。
既然我们知道了， $on $emit $off 方法是在Vue的原型对象上的，对于所有组件来说是可见的，相当于一个全局对象，所有组件都可以访问这些方法。这是其一。其二， $on接受两个参数，一个字符串，一个回调函数。这个回调函数是被 $emit 方法触发的也就是事件分发。 $on一般是在父组件中使用的， $emit一般在子组件中使用，子组件中触发父组件的回调函数， $emit第一个参数是字符串(必须和 $on使用的字符串使用的一致)，第二参数可选，是传给父组件中 $on 回调函数的数据。
ok，至此分析清楚了，就可以开始代码实现。

代码实现

//eventBus.js文件
(function(w){
	//定义一个方法挂载对象
	let eventBus = {}
	//定义一个回调函数的容器对象
	let eventContainer = {}
	//定义on方法
	eventBus.on = function(eventName,callback){
		let eventCallbacks = eventContainer[eventName]; //拿到key的值
		if(eventCallbacks){ //如果存在值
			eventCallbacks.push(callback)
		}else{
	 	//这里需要明白，同一个事件名称是可以挂载多个回调函数的
			eventContainer[eventName] = [callback]
		}
	}
	//事件分发
	eventBus.emit = function(eventName,data){
		let callbacks = eventContainer[eventName];
		if(callbacks && callbacks.length>0){
			callbacks.forEach(callback => callback(data))
		}
		
	}
	//事件移除
	eventBus.off = function(eventName){
	//移除所有监听事件
		if(typeof eventName === 'undefined'){
			eventContainer = {};
		}else{
		 	delete	eventContainer[eventName];
		}
	}
	//挂载到window上
	w.eventBus = eventBus;
})(window)

ok，至此代码就是先完成，可以来测试看看。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义全局事件总线</title>
</head>
<body>

  <script src="./my-eventBus.js"></script>
  <script>
    /*
    eventBus:
      1). on(eventName, callback): 绑定事件监听
      2). emit(eventName, data): 分发事件
      3). off(eventName): 移除事件监听
    */

    eventBus.on('add', (data) => {
      console.log('add1()', data)
    })
    eventBus.on('add', (data) => {
      console.log('add2()', data)
    })
    // eventBus.on('delete', (data) => {
    //   console.log('delete()', data)
    // })
    eventBus.emit('add', 'add事件')
    // eventBus.off()
    eventBus.off('add');

    // eventBus.emit('delete', 'baidu')

  </script>
</body>
</html>