vue广播与派发(组件间通信)

/**
 * @param {*} componentName 
 * @param {*} eventName 
 * @param {*} params 
 * @param {*} once 通知到一个就不找了
 */
export function broadcast(componentName, eventName, params, once = false) {
  for (let i = 0; i < this.$children.length; i++) {
    const child = this.$children[i];
    var name = child.$options.name;
    if (name === componentName) {
      child.$emit.apply(child, [eventName, params]);
      if (once) {
        break;
      }
    } else {
      broadcast.apply(child, [componentName, eventName, params, once]);
    }
  }
}

export function dispatch(componentName, eventName, params) {
  var parent = this.$parent || this.$root;
  var name = parent.$options.name;
  while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;
    if (parent) {
      name = parent.$options.componentName;
    }
  }
  if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
  }
}

export default {
  methods: {
    // 给上层通知
    dispatch(componentName, eventName, params, once = false) {
      dispatch.call(this, componentName, eventName, params, once);
    },
    // 给下层通知
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

---

父的name为：Home

子的name为：SlideBox3

向下层通知

父组件中使用：

// 引入或做为mixins
import * as emitter from '@/utils/emitter' // 上面代码那个文件

/*
 使用: emitter.broadcast.call(当前作用域, 子元素的name, 通知子元素的事件名, 给子元素的参数, 通知到一个就结束)
*/
emitter.broadcast.call(this, "SlideBox3", "onSlideLeave", params, true)

子组件中使用（监听）：

// this.$on(该名称要和父通知事件保持一致, 一个方法)
this.$on('onSlideLeave', () => this.drawerVisible = false) // 滑动关闭弹窗

向上层通知

父组件中使用（监听）：

this.$on('leaveFinish', (params) => { console.log('收到子的消息通知', params) })

子组件中使用：

// 引入或做为mixins
import * as emitter from '@/utils/emitter'

emitter.dispatch.call(this, "Home", "leaveFinish", {state: 1})

---

emitter代码参考elementui源码后改动部分