emitter.off
时间: 2024-10-09 20:08:15 浏览: 38
`emitter.off`是一个常见的事件管理API,通常用于Node.js的EventEmitter模块中。它用于从事件监听器列表中移除之前添加的监听器。这个函数的基本用法如下:
```javascript
const EventEmitter = require('events');
// 创建一个EventEmitter实例
const emitter = new EventEmitter();
// 添加一个监听器
emitter.on('some-event', function listenerFunction() {
// ...
});
// 后来想移除该监听器
emitter.off('some-event', listenerFunction);
// 现在,当'some-event'触发时,之前的listenerFunction将不再被执行
```
当你不再需要某个事件处理器,调用`emitter.off`可以防止事件无限制地触发,避免内存泄漏。`off`接受两个参数,第一个是要移除监听器的事件名,第二个是可选的处理函数,如果提供,只会移除指定的函数。
相关问题
vue3 mitt.off和mitt.on的用法
### Vue3 中 mitt 库的事件监听和取消监听
在 Vue3 项目中使用 `mitt` 进行组件间通信时,可以通过简单的 API 来实现事件的监听与取消监听。
#### 创建并导出事件中心
为了方便管理全局事件,在项目的某个位置创建一个新的 JavaScript 文件来初始化 `mitt` 实例:
```javascript
// src/eventBus.js
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
```
此代码片段展示了如何引入 `mitt` 并创建一个名为 `emitter` 的实例[^1]。
#### 组件内监听事件
当希望在一个组件内部订阅特定类型的事件消息时,可以在该组件生命周期内的适当阶段调用 `.on()` 方法完成绑定操作。下面是一个具体的例子展示怎样设置监听器以及处理接收到的信息:
```html
<!-- ComponentA.vue -->
<template>
<div>Component A</div>
</template>
<script>
import emitter from '../eventBus'; // 导入自定义的事件中心
export default {
mounted() {
this.eventListener();
},
methods: {
eventListener(){
emitter.on('custom-event', (data) => {
console.log(`Received data from another component: ${data}`);
});
}
},
beforeUnmount() {
// 清理工作防止内存泄漏
emitter.off('custom-event');
}
}
</script>
```
上述代码说明了如何通过 `mounted` 生命周期钩子函数启动监听逻辑,并且确保在组件销毁之前解除所有已注册过的回调以避免潜在的风险[^4]。
#### 发布事件给其他组件
如果想要向其它已经设置了对应处理器的地方广播通知,则只需要简单地利用 `.emit()` 函数即可做到这一点。这里给出一段示范性的代码用来触发一次带有参数传递的通知行为:
```html
<!-- ComponentB.vue -->
<template>
<button @click="sendData">Send Data to Other Components</button>
</template>
<script>
import emitter from '../eventBus';
export default {
setup() {
const sendData = () => {
emitter.emit('custom-event', "Hello World!");
};
return { sendData };
}
};
</script>
```
这段脚本解释了如何从按钮点击事件出发,借助于 `emitter.emit()` 向外分发一条携带字符串 `"Hello World!"` 的消息给任何关心 `'custom-event'` 类型更新的对象们。
#### 取消监听指定事件
对于不再需要继续响应某些类别的变动情况而言,应当及时停止不必要的侦听动作以免造成性能浪费或其他副作用。这可通过如下所示的方式达成目的——即针对具体名称下的每一个关联项执行删除指令:
```javascript
// 停止监听单个事件
emitter.off('custom-event');
// 或者完全清除某对象下所有的监听关系(假设存在多个不同名次)
emitter.all.clear(); // 注意:这是清空所有事件的方法,不是标准API的一部分,请谨慎使用。
```
以上就是关于 `mitt` 在 Vue3 环境里有关于添加/移除监听者的实际运用案例介绍。
this.$remitter
### 关于 `this.$emitter` 在 Vue.js 中的使用
在 Vue.js 应用程序中,事件总线模式是一种常见的组件间通信方式。`this.$emitter` 并不是 Vue 官方内置的对象属性;然而,开发者可以通过安装插件如 `mitt` 或者自定义实现来创建一个全局事件监听器对象并挂载到 Vue 实例上以便使用。
当实现了这样的功能之后,在任何子组件内都可以通过访问 `this.$emitter.emit('eventName', payload)` 来触发事件,并且其他地方可以订阅这些事件:
```javascript
// 假设已经在 main.js 中初始化了 emitter 并将其挂载到了原型链上
import mitt from 'mitt';
const emitter = mitt();
Vue.prototype.$emitter = emitter;
// 子组件A 发送消息
methods: {
sendMessage() {
this.$emitter.emit('message-sent', { text: 'Hello!' });
}
}
```
接收端可以在根实例或者其他组件里监听该事件并通过回调函数处理传入的数据:
```javascript
created () {
this.$emitter.on('message-sent', (data) => {
console.log(data.text); // 输出 "Hello!"
})
},
beforeDestroy () {
// 清除不再需要的监听以防内存泄漏
this.$emitter.off('message-sent');
}
```
需要注意的是这种方式适用于非父子关系的兄弟组件之间以及跨多层嵌套结构的情况下的通讯需求[^1]。
阅读全文