Vue $on、$emit的实现

最新推荐文章于 2025-05-08 14:28:59 发布

meng_xiaoxiao

最新推荐文章于 2025-05-08 14:28:59 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/meng_xiaoxiao/article/details/125112933

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

1、$on的用法：接收2个参数，返回对象的本身；

第一个参数是字符串或者字符串数组。

第二参数是回调函数。

2、$emit的用法：接收1+n个参数，返回对象的本身；

第一个参数是字符串；

第n参数是作为回调函数的参数。

用法如下;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<script type="module">
			import event from "./eventBus.js"
			event.$on("test",function(){
				console.log(arguments);
			})
			event.$on("test",function(){
				console.log(arguments);
			})
			event.$on(['a','b'],function(){
				console.log(arguments);
			})
			console.log(event._events);
			event.$emit("test",1,3,4)
			event.$emit("a",1)
		</script>
	
	</body>
</html>

eventBus.js的实现：

class eventBus {
	constructor() {
		this._events = {}
	}
	$on(event, fn) {
		if (Array.isArray(event)) {
			for (var i = 0, l = event.length; i < l; i++) {
				this.$on(event[i], fn);
			}
		} else {
			// 如果_events对象存在event属性数组，往该数组添加回调函数
			//否则给_events添加一个event属性并赋值为空数组，再往这个数组添加回调方法
			(this._events[event] || (this._events[event] = [])).push(fn)
		}
		return this;
	}
	$emit(event) {
		const cbs=this._events[event];
		// 除去事件名，剩余参数作为回调函数的参数
		const args=Array.from(arguments).slice(1);
		if (cbs){
			for (var i = 0; i < cbs.length; i++) {
				cbs[i](...args)
			}
		}
		return this;
	}
}
export default new eventBus()

打印结果：