vue满足后订阅也能监听发布的模式

1. Event.js

var Event = (function() {
  let clientList = {};
  let triList = {};
  let listen, trigger, remove;
  // 参数：事件的key， 回调函数
  listen = (key, fn) => {
    // 如果还不存在该事件的监听，初始化为[]
    if (!clientList[key]) {
      clientList[key] = [];
    }
    // 将监听事件的回调函数添加到数组中
    clientList[key].push(fn);
    // 如果事件trigger时有携带参数， 将参数传入回调中  //先trigger 后listen 执行以下代码
    if (triList[key] && triList[key].length) {
      fn.apply(this, triList[key]);
    }
  }

  trigger = function() {
    // 获取参数
    let arg = arguments;
    // 活动参数名
    let key = Array.prototype.shift.call(arg);
    // 获取监听该事件的回调列表
    let fns = clientList[key];
    // 将携带参数记录到数组中
    triList[key] = Array.prototype.slice.call(arg);
    // 如果不存在回调，则返回  // 先listen 后trigger 执行以下代码
    if (!fns || fns.length === 0) {
        return false;
    }
    // 如果存在回调，则依次触发回调函数
    for (let i = 0; i < fns.length; i++) {
        fns[i].apply(this, arguments);
    }
  }

  // 参数：事件的key， 回调函数
  remove = (key, fn) => {
    // 获取回调函数列表
    let fns = clientList[key];
    // 如果不存在，则返回
    if (!fns) {
        return false;
    }
    // 如果没有传需要删除的回调函数的名称，则删除该事件中的所有监听回调
    if (!fn) {
        fns && (fns.length = 0);
    } else {
        // 否则删除对应的回调函数
        for (var l = fns.length - 1; l >= 0; l--) {
            var _fn = fns[l];
            if (_fn === fn) {
                fns.splice(l, 1);
            }
        }
    }
  }

  return {
    listen,
    trigger,
    remove
  };
}());

2.使用

// 使用规则如下：

// trigger规则：

// 如果有多处trigger，且参数不同时，需保持类型相同，参数为必传

/**
 * Event.trigger('key', obj)
 * 
 * Event.trigger('key', {})
 */


// listen规则：

// 如果该事件有多处使用，且在同一路由中，在组件销毁时需要单独删除本组件内的回调，不可删除所有
/**
 * Event.listen('key', myfun)
 *
 * function myfun (obj){
 *   console.log('我的函数' + obj);
 * }
 * 
 * Event.remove('key', myfun)
 */

// 如果该事件单独使用，在组件销毁时删除所有即可
/**
 * Event.listen('key', (obj)=>{
 *   console.log(obj);
 * })
 * 
 * Event.remove('key')
 */

以下为举例：

import { Event } from '@/utils/Event';
export default {
  created() {
  	Event.trigger('getUserInfo', {name: '张三'}, true, 100);
    Event.listen('getUserInfo', this.getUserInfo);
  },
  destroyed() {
    Event.remove('getUserInfo', this.getUserInfo);
  },
  methods: {
	getUserInfo(res) {
		// 发布出来的信息会传递到这里
		console.log(res);
		// 打印： {name: "张三"}
    }
  }
};

当然也能直接这样用，(建议使用第一种)

Event.listen('getUserInfo', res=>{
	console.log(res);
});

同时也支持多参数的传递：

Event.trigger('getUserInfo', { name: '张三' }, true, 100);
Event.listen('getUserInfo', (res, boo, num) => {
      console.log(res);
      console.log(boo);
      console.log(num);
    });

// 多参数依旧能传递到这里
getUserInfo(res, boo, num) {
	  console.log(res);
      console.log(boo);
      console.log(num);
    }