vue 封装类似于$emit、$on公共方法

在vue项目中我们经常用到组件传值的方法；

接下来我们就封装一个类似于$emit、$on的方法；

在src目录下创建一个observer的文件，里边写上要封装的方法；

const eventList = {};

const $on = (eventName, callback) => {
  if (!eventList[eventName]) {
    eventList[eventName] = [];
  }
  eventList[eventName].push(callback);
};

const $emit = (eventName, params) => {
  if (eventList[eventName]) {
    let arr = eventList[eventName];
    arr.map(cb => {
      cb(params);
    });
  }
};

const $off = (eventName, callback) => {
  if (eventList[eventName]) {
    if (callback) {
      let index = eventList[eventName].indexOf(callback);
      eventList[eventName].splice(index, 1);
    } else {
      eventList[eventName].length = 0;
    }
  }
};

export default {
  $on,
  $emit,
  $off
};

　　然后写完封装方法后在main.js文件中引入；

 在组件调用使用的方法

 在组件接收的调用方法

 这样就写了一个公共方法来实现组件间传值