Vue.js解析(十一)【说说element组件库broadcast与dispatch】
来源:互联网 发布:js插件编写 编辑:程序博客网 时间:2024/06/05 04:48
周所周知,Vue在2.0版本中去除了
看一下源代码
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。
阅读全文
0 0
- Vue.js解析(十一)【说说element组件库broadcast与dispatch】
- 说说element组件库broadcast与dispatch
- Vue.js说说组件
- Vue.js说说组件
- Vue框架Element的事件传递broadcast和dispatch方法分析
- Vue框架Element的事件传递broadcast和dispatch方法分析
- Vue框架Element的事件传递broadcast和dispatch方法分析
- Vue.js 学习10 Element基于Vue2.0的组件库
- Vue.js解析(十)【Vue组件间通信】
- vue element-ui dialog组件
- 【Vue.js】-Vue.js组件
- vue-cli 引入element(饿了吗)组件库
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- vue.js组件与组件之间的通信
- Vue.js UI框架 - element
- vue.js:[Vue warn]: Cannot find element:
- Vue.js vue-resoucre的使用与解析 全攻略
- Vue.js组件
- 制作html5游戏2
- HDU-1281 棋盘游戏
- 计算机音频储存
- 角点检测---moravec
- java-14-String类
- Vue.js解析(十一)【说说element组件库broadcast与dispatch】
- Linux中软连接和硬链接
- 4-2 电子时钟中的运算符重载
- 集合相等问题
- python使用互斥锁同步线程
- 1.2 换行输出
- 2017.11.16
- 笔记:elasticsearch在项目中的使用需求
- 浅谈堆和栈的区别