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 ...
随机推荐
- Mybatis:使用bean传值,当传入值为Null时,提示“无效的列类型”的解决办法
问题描述:在使用mybatis对数据库执行更新操作时,parameterType为某个具体的bean,而bean中传入的参数为null时,抛出异常如下:org.mybatis.spring.MyBat ...
- Https之SSL原理
一.HTTPS和SSL HTTP(Hyper TEXT Transfer Protocol超文本传输协议)是目前互联网上应用最为广泛的一种网络协议,用于在Web浏览器和网站服务器之间传递信息,但是HT ...
- overload与override的区别
override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...
- java实现Kafka的消费者示例
使用java实现Kafka的消费者 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...
- eclipse工具的安装配置
安装环境 系统:Windows7 软件:jre-8u73-windows-x64.exe,eclipse-inst-win64.exe Eclipse的安装过程 1.安装jre-8u73-window ...
- Oracle EBS 清理归档
oraprod 登陆数据库服务器 执行 rman target / 如图: 执行: delete noprompt force archivelog all completed before ‘sys ...
- spring定时,cronExpression表达式解释
附:cronExpression表达式解释: 0 0 12 * * ?---------------在每天中午12:00触发 0 15 10 ? * *---------------每天上午10:15 ...
- LocationCoder 地图经纬度解析
LocationCoder 地图经纬度解析 其实,在地图里面将地图解析成有意义的地址,或者把地址转换成有意义的经纬度都是很容易的事情,只是我将其封装了支持KVO,通知中心,block取结果,代理取结果 ...
- 将亚马逊aws的ec2服务器的登陆方式改为密码登陆
1.在用密钥登陆ec2后,为root用户创建密码: sudo passwd root 系统会让你输入两次密码 2.切换为root用户,并且编辑sshd_config文件,PasswordAuthent ...
- 清除右键菜单CMD入口
批处理代码 reg add "HKEY_CLASSES_ROOT\Directory\Background\shell\cmd" /v Extended /t REG_SZ