说说 element 组件库 broadcast 与 dispatch

简介: 说说 element 组件库 broadcast 与 dispatch

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

看一下源代码

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。

目录
相关文章
|
安全 Shell 网络安全
【服务器】Xshell与Xftp软件的使用指南
【服务器】Xshell与Xftp软件的使用指南
1261 0
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
915 0
|
10月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
640 1
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
953 1
|
11月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
435 0
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
255 0
|
数据安全/隐私保护 Windows
gitee提交被拒绝的问题 Authentication failed for gitee
gitee提交被拒绝的问题 Authentication failed for gitee
580 1
|
JavaScript 前端开发
浏览器中的事件循环和Node.js中事件循环的区别(经典面试题)
浏览器中的事件循环和Node.js中事件循环的区别(经典面试题)
1190 0
|
Linux Go
Linux 内核调试器(KDB)
Linux 内核调试器(KDB)允许您调试 Linux 内核。这个恰如其名的工具实质上是内核代码的补丁,它允许高手访问内核内存和数据结构。KDB 的主要优点之一就是它不需要用另一台机器进行调试:您可以调试正在运行的内核。
1547 0
|
机器学习/深度学习 搜索推荐 算法
选择排序(附代码详解)(C语言)
选择排序(附代码详解)(C语言)
634 0