说说element组件库broadcast与dispatch

梦里梦外; 2022-06-07 11:24 105阅读 0赞

周所周知，Vue在2.0版本中去除了broadcast方法以及dispatch方法，最近在学习饿了么的[Element][]时重新实现了这两种方法，并以minix的方式引入。

看一下[源代码][Link 1]

function broadcast(componentName, eventName, params) { 
      /*遍历当前节点下的所有子组件*/
      this.$children.forEach(child => {
        /*获取子组件名称*/
        var name = child.$options.componentName;
    
        if (name === componentName) {
          /*如果是我们需要广播到的子组件的时候调用$emit触发所需事件，在子组件中用$on监听*/
          child.$emit.apply(child, [eventName].concat(params));
        } else {
          /*非所需子组件则递归遍历深层次子组件*/
          broadcast.apply(child, [componentName, eventName].concat([params]));
        }
      });
    }
    export default {
      methods: {
        /*对多级父组件进行事件派发*/
        dispatch(componentName, eventName, params) {
          /*获取父组件，如果以及是根组件，则是$root*/
          var parent = this.$parent || this.$root;
          /*获取父节点的组件名*/
          var name = parent.$options.componentName;
    
          while (parent && (!name || name !== componentName)) {
            /*当父组件不是所需组件时继续向上寻找*/
            parent = parent.$parent;
    
            if (parent) {
              name = parent.$options.componentName;
            }
          }
          /*找到所需组件后调用$emit触发当前事件*/
          if (parent) {
            parent.$emit.apply(parent, [eventName].concat(params));
          }
        },
        /* 向所有子组件进行事件广播。 这里包了一层，为了修改broadcast的this对象为当前Vue实例 */
        broadcast(componentName, eventName, params) {
          broadcast.call(this, componentName, eventName, params);
        }
      }
    };

其实这里的broadcast与dispatch实现了一个定向的多层级父子组件间的事件广播及事件派发功能。完成多层级分发对应事件的组件间通信功能。

broadcast通过递归遍历子组件找到所需组件广播事件，而dispatch则逐级向上查找对应父组件派发事件。

broadcast需要三个参数，componentName（组件名），componentName（事件名称）以及params（数据）。根据componentName深度遍历子组件找到对应组件emit事件eventName。

dispatch同样道理，需要三个参数，componentName（组件名），componentName（事件名称）以及params（数据）。根据componentName向上级一直寻找对应父组件，找到以后emit事件eventName。

[Element]: https://github.com/ElemeFE/element
[Link 1]: https://github.com/ElemeFE/element/blob/dev/src/mixins/emitter.js

发表评论取消回复

表情：

评论列表（有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

相关快速上手 Vue 和 Element-UI 组件库

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新...

痛定思痛。/ 2024年05月23日 18:58/ 0 赞/ 71 阅读

相关 element-plus组件库的使用

![在这里插入图片描述][924e49429f4b436f99a2a9d6a55d9a9e.webp_pic_center] -------------------- 一

女爷i/ 2024年04月01日 15:29/ 0 赞/ 83 阅读

相关【Vue基础】element组件

一、需求描述有按钮、表格、页码、嵌套的表格，选择页码或每页记录数时会出现监听效果，点击嵌套的表格会弹出表格内容。二、代码分享 ElementView.vue文件中代码

谁借莪１个温暖的怀抱￠/ 2023年10月11日 21:38/ 0 赞/ 37 阅读

相关第十四章：Element-ui组件库

第十四章：Element-ui组件库一、常用的UI组件库 1.1 移动端常用UI组件库 Vant组件库 Mint组件库 Cube组件库

分手后的思念是犯贱/ 2023年09月29日 16:26/ 0 赞/ 18 阅读

相关 Vue引入Element-ui组件库

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、全局引入二、按需引入 -----------------

你的名字/ 2023年09月26日 18:04/ 0 赞/ 92 阅读

相关说说如何安装与配置 Vant Weapp 小程序 UI 组件库

Vant Weapp 是移动端 Vue 组件库 [Vant][] 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，帮忙开发者快速搭建小程序应用。 1 安装

墨蓝/ 2023年07月22日 09:12/ 0 赞/ 22 阅读

相关是的,element组件库_检测Element是否是Web组件

是的,element组件库 I've advocated for web components since before they became a spec, mostly

朴灿烈づ我的快乐病毒、/ 2023年02月21日 15:30/ 0 赞/ 14 阅读

相关 Vue组件之$dispatch和$broadcast

$ dispatch 主要是事件流由当前组件往父组件流动，当满足一定条件的时候就会触发当前子组件的监听事件，$broadcast 的功能是事件流由当前组件向子组件流动，当满足一

迈不过友情╰/ 2022年10月01日 05:52/ 0 赞/ 10 阅读

相关 Android中Broadcast Receiver组件详解

BroadcastReceiver（广播接收器）是[Android][]中的四大组件之一。下面是Android Doc中关于BroadcastReceiver的概述：

小鱼儿/ 2022年06月16日 09:23/ 0 赞/ 171 阅读

相关说说element组件库broadcast与dispatch

周所周知，Vue在2.0版本中去除了broadcast方法以及dispatch方法，最近在学习饿了么的[Element][]时重新实现了这两种方法，并以minix的方式引入。

梦里梦外;/ 2022年06月07日 11:24/ 0 赞/ 106 阅读