通过vue手动封装on、emit、off的代码详解

深入理解Vue中的事件处理机制：手动封装on、emit和off的代码详解

一、概念介绍

在Vue中，事件处理是核心功能之一。有三个核心方法：$on，$emit和$off，它们分别用于事件绑定、事件触发和事件解绑。

1. $on("事件名称"，回调函数)：用于事件绑定，一个事件名称上可以绑定多个函数。

2. $emit("事件名称"，需要传递的值)：用于触发事件，当触发时，会调用该事件身上所有的函数。

3. $off("事件名称"，[需要解绑的函数])：用于事件解绑，若指定解绑函数则只解绑相应函数，否则解绑全部。

二、手动封装事件的作用

在Vue中，我们有时需要在非父子组件间进行传值。一种常见的方式是通过在Vue的原型上添加一个公共的Vue实例，并使用$on和$emit方法进行数据传递。但这种方式可能导致性能问题，因此我们可以选择手动封装on、emit和off事件来实现更高效的非父子组件传值。

三、封装on、emit、off事件的代码详解

1. 创建事件仓库

为了存放事件，我们首先需要创建一个事件列表。由于一个事件名称可能需要对应多个函数（一对多的模式），所以我们采用对象来存储这些数据。

```javascript

const EventList = {};

```

2. $on的实现

$on方法用于绑定事件。如果事件名称不存在，我们初始化创建一个数组；如果事件名称已存在，我们将当前函数push到数组中。

```javascript

const on = function(eventName, callback) {

if (!EventList[eventName]) {

EventList[eventName] = [];

}

EventList[eventName].push(callback);

};

```

3. $emit的实现

$emit方法用于触发事件。如果事件名称不存在，我们直接返回；如果事件名称存在，我们遍历该事件名称对应的所有函数，并将参数传递过去。

```javascript

const emit = function(eventName, params) {

if (!EventList[eventName]) return;

EventList[eventName].forEach((cb) => {

cb(params);

});

};

```

4. $off的实现

$off方法用于解绑事件。如果事件名称不存在，我们直接返回；如果事件名称存在，我们判断是否需要解绑特定的函数。如果需要，我们删除对应下标的函数；如果不需要，我们清空整个数组。

```javascript

const off = function(eventName, callback) {

if (!EventList[eventName]) return;

if (callback) {

const index = EventList[eventName]dexOf(callback);

EventList[eventName].splice(index, 1);

} else {

EventList[eventName] = [];

}

};

```

四、导出封装的事件方法

我们将封装好的$on、$emit和$off方法导出，以便在其他文件中调用。

```javascript

export default {

$on,

$emit,

$off,

};

```

以上就是通过Vue手动封装on、emit、off的代码详解。希望对大家有所帮助，如有任何疑问，请随时提问。