class EventEmmiter {
constructor() {
// 存储事件的容器this._events = {
// eventName: [listener1, listener2...]};}// 绑定事件on(eventName, listener) {
if (this._events[eventName]) {
// 说明之前添加过事件this._events[eventName].push(listener);} else {
// 说明之前没有值this._events[eventName] = [listener];}}// 绑定一次性事件:触发一次后自动解绑once(eventName, listener) {
const lis = (...data) => {
// 解绑事件this.off(eventName, lis);// 触发事件回调函数listener(...data);};this.on(eventName, lis);}// 解绑事件off(eventName, listener) {
if (!this._events[eventName]) {
return;}if (listener) {
// 传入了listener,解绑一个回调this._events[eventName] = this._events[eventName].filter((lis) => lis !== listener);} else {
// 没有传入listener,解绑所有回调this._events[eventName] = null;}}// 触发事件emit(eventName, ...data) {
/*...data 代表剩下所有参数例如:emit('xxx', 1, 2, 3, 4)data --> [1, 2, 3, 4]*/if (!this._events[eventName]) {
return;}// ...data --> 展开数组,将数组中的值作为参数传入函数中this._events[eventName].forEach((listener) => listener(...data));}
}const myEvent = new EventEmmiter();const cb = function () {
console.log(111);
};myEvent.on("aaa", cb);// myEvent.once("aaa", function () {
// console.log(222);
// });myEvent.on("aaa", function () {
console.log(222);
});myEvent.emit("aaa");
myEvent.off("aaa");
// myEvent.off("aaa", cb);
myEvent.emit("aaa");
详细解决方案
自定义on/once/off/emit
热度:33 发布时间:2023-12-17 03:08:41.0
相关解决方案
- 大家帮小弟我看看这个代码有啥有关问题!Emit
- Qt emit,该怎么处理
- emit 纳闷
- Qt线程里,emit 信号后,sleep(10)的有关问题
- 从node.js客户端到浏览器客户端的socket.emit
- uniapp 使用uni.$emit()和uni.$on() 进行页面间通讯
- js观察者模式on、emit、off、once实现
- vue cli 组件通信传递之$off,$on,$emit
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off的使用
- Vue父子组件传值 v-bind:、this.$emit、 this.list.splice(index,1)、@delete等的使用
- 子组件向父组件传值-$emit
- Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
- 【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
- Conflict: Multiple assets emit different content to the same filename index.html报错解决方案
- vue2父向子传值props ,子向父用自定义事件$emit
- props emit 使用备忘
- vue 三种传参方式之一 非父子组建传参 $emit $on
- bus.$emit+bus.$on赋值成功取值失败
- $emit input会有事件穿透现象
- Vue-组件通信-props和$emit
- Vue3 TypeScript 子传父 emit 的使用
- 自定义on/once/off/emit
- 写一个EventEmitter类,包含on,emit,off,once方法
- 自定义事件$on, $emit, $off ,订阅消息,发布消息,注销消息
- props,ref,emit,render使用
- vue学习--$emit 与 props 以及非父子组件之间的通信
- VUE子组件使用this.$emit()向父组件传值
- vue之父子组件间通信(props、$ref 、 $emit )
- vue父子组件——$emit()事件
- vue 兄弟组件之间传数据之$emit 和 $on 组件通信