原生js和vue之間的數據通訊--EventEmitter

有個小項目在原來原生的框架編寫，但是不想寫原生，就引入了vue

然后有個需求要和原生的js進行交互通訊，於是就可以用node.js EventEmitter

具體做法:

先引入文件<script src="../../js/eventEmitter.js"></script>，

初始化，

然后在vue里面發送emit，

在外面監聽on

var event = new EventEmitter();

$(document).ready(function () {
    //監聽some_event事件
    event.on('some_event', function (data) {
        
    });
}）
 
let vm = new Vue({
    el: "#app",
    methods: {
        getList() {
            // 觸發事件
            event.emit('some_event','params');
        },
    }

});    

 

附上eventEmitter.js

class EventEmitter {
  constructor() {
    this.event = {};
    this.maxListerners = 10;
  }
  // 監聽
  on(type, listener) {
    if (this.event[type]) {
      if (this.event[type].length >= this.maxListerners) {
        console.error('同一個監聽器最多被十個對象監聽,否則可能造成內存泄漏.\n');
        return;
      }
            if (!this.event[type].includes(listener)) {
                this.event[type].push(listener);
            }
    } else {
      this.event[type] = [listener];
    }
  }
  //發送監聽
  emit(type, ...rest) {
    if (this.event[type]) {
      this.event[type].map(fn => fn.apply(this, rest));
    }
  }
  //移除監聽器
  removeListener(type,func) {
    if (this.event[type]) {
            this.event[type] = this.event[type].filter(item => item !== func);
            if (this.event[type].length === 0) {
                delete this.event[type];
            }
    }
  }
  //移除所有的監聽器
  removeAllListener() {
    this.event = {};
  }
}