vue跨级组件通信(broadcast+dispatch)

成熟稳重的李先生IP属地: 上海
0.204字数 296阅读 1,433

谈到跨级组件通信,我最先想到的是eventBus,方便易用,可以在你想组合的组件之间,随意使用,甚至没有级别关系的组件,只要在一个组件系统中,就可以通信。但是,如果你想完成一个通用组件,而且它有专用的子级组件。当页面多次使用这个组件时,eventBus在触发时就会发生混乱。这时,就需要一个指代父子关系的约束。

  1. dispatch.(派发),它的逻辑是,子组件触发一个事件,它的所有父级都可以监听到(这样,就可以实现多级通信)。vue中原来是有此方法的,官方建议,父子通信用on,emit,跨级就使用总线(eventBus),更复杂的可以使用vuex。
    但是,如上所述,当你需要完成一个供别人使用的组件时,broadcast和dispatch就非常有用,上代码了
/**
 * 首先给Vue原型增加dispatch方法
 * @param eventName  要触发的事件名
 * @param componentName 需要响应的父级(或者更高)
 * @param val 传递给父级的数据
 */
Vue.prototype.$dispatch= function(eventName, componentName, value) {
  let parent = this.$parent;
  while (parent) {
    if (parent.$options.name === componentName) {  //这样就可以做到,通知特定的父级去响应
      parent.$emit(eventName, value);
      break;
    }
    parent = parent.$parent;
  }
};
  1. broadcast. (广播),父组件广播一个事件,它的所有子组件都可以接收到。
Vue.prototype.$broadcast = function(eventName, componentName, value) {
  let children = this.$children;
  function broadcast(children) {
    children.forEach(child => {
      if (child.$options.name === componentName) {
        console.log(componentName, "广播");
        child.$emit(eventName, value);
      }
      if (child.$children) {
        broadcast(child.$children);
      }
    });
  }
  broadcast(children);
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
3人点赞
更多精彩内容,就在简书APP
"小礼物走一走,来简书关注我"
还没有人赞赏,支持一下
总资产3共写了2.5W字获得37个赞共20个粉丝