element-ui emitter.js文件源码学习
紧接着看的radio组件,遇到了mixins: [Emitter],发现这对象来自另外的js文件,于是便去了解了下。 打开emitter.js,发现该js是提供方法给其他组件做混入使用的。他对外有dispatch和broadcast两个接口,从命名和参数等方面,这两个方法应该大致是用来处理一些各层级之间事件的,也就是通信。我们先来看下dispatch方法。 一、dispatchdispatch方法有三个参数,
前两行,用于查找到当前元素的父组件,如果没有就使用根节点,并取父组件的组件名用于后期匹配。 紧接着的是一个while循环,用于循环父组件,直到找到或者到达根元素,匹配不到。 while (parent && (!name || name !== componentName)) { parent = parent.$parent; ??? if (parent) { name = parent.$options.componentName; } } 循环过程中不断记录组件名,用于判断是否找到。 最后一部分是,当有匹配到的父组件时,就去触发父组件的对应的事件函数。 if (parent) { ? parent.$emit.apply(parent,[eventName].concat(params)); } 接下来看下broadcast函数。 二、broadcast将emitter内部定义的一个broadcast函数利用call改变this指向。 broadcast内直接对子组件进行遍历,当匹配到对应的组件名时,则去触发对应子组件的对应事件。如果没有,则递归继续查找子组件。 注:我们会发现每条向下传播的线路只要触发了一次对应的事件,就不会再向下传递了。 带注释的源码:emitter.js。 element-ui中的事件传播就是这样的了,让我想到了angular中的$broadcast和$emit事件。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |