vue2 broadcast和dispatch的理解
/*
broadcast 事件广播
@param {componentName} 组件名称
@param {eventName} 事件名
@param {params} 参数
遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params.
如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。
*/
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
})
}
/*
* dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。
@param { componentName } 组件名称
@param { eventName } 事件名
@param { params } 参数
*/
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name; while (parent && (!name || name !== componentName)) {
parent = parent.$parent; if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
vue2 broadcast和dispatch的理解的更多相关文章
- vue2.0 broadcast和dispatch的理解
阅读目录 vue2 broadcast和dispatch的理解 回到顶部 vue2 broadcast和dispatch的理解 /* broadcast 事件广播 @param {componentN ...
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- vue之自行实现派发与广播-dispatch与broadcast
要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的 ...
- vue2.0 $emit $on组件通信
在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- 【vue】饿了么项目-goods商品列表页开发
1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...
随机推荐
- Hive安装与应用过程
1. 参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2. 安装环境说明 2.1. 环境说明 ...
- Retrofit+RxJava(2)-基本使用
首先是抽象的基类 public abstract class BaseApi { public static final String API_SERVER = "服务器地址" p ...
- Oracle Sequence Cache 参数说明
转自 http://blog.csdn.net/tianlesoftware/article/details/5995051 之前整理的一篇文章: ORACLE SEQUENCE 介绍 http:// ...
- Java 性能调优指南之 Java 集合概览
[编者按]本文作者为拥有十年金融软件开发经验的 Mikhail Vorontsov,文章主要概览了所有标准 Java 集合类型.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文: 本 ...
- springboot学习网站及博客
1关于Spring Boot的博客集合https://www.jianshu.com/p/7e2e5e7b32ab 2泥瓦匠BYSocket的Spring Boot系列 https://www.bys ...
- SQL索引未使用
针对自己曾经经历过的一道面试题,那些情况不走索引,于是搜索网络和书籍的一些资料,整理如下: 1.查询谓词没有使用索引的主要边界,换句话说就是select *,可能会导致不走索引.比如,你查询的是SEL ...
- Spring MVC Hello World 404
下面的例子说明了如何使用 Spring MVC 框架来编写一个简单的基于 web 的 Hello World 应用程序.下面让我们使用 Eclipse IDE,然后按照下面的步骤使用 Spring 的 ...
- 如何修改PPT中左下方状态栏的主题名称
网上有很多很好的PPT,可惜一般作者都加了名字和主题,现在我们就来说说如何修改PPT中左下方状态栏的主题名称. 如下图所示,红色方框内就是别人设置的主题. 网上很多网友都说:点击"视图&qu ...
- September 03rd 2017 Week 36th Sunday
What does it profit a man if he gains the whole world and loses his own soul? 失去灵魂,赢得世界又如何? It matte ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...