饿了吗?el-radio先做个宏观分析。首先,让我们看看有多少种使用无线电的形式或方式。单独吃单选按钮组的单选按钮radio,所以源码里有这几个文件。我们先来解读一下radio.vue文件的模板部分。快点跳过吧...直接看js部分importEmitterfrom'element-ui/src/mixins/emitter';exportdefault{name:'ElRadio',mixins:[Emitter],}mixinsMixins提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。混合对象可以包含任意组件选项。当组件使用mixin时,mixin的所有选项都将“混合”到组件自己的选项中。以上是普通话,但都是精髓。上面有几个关键点是“可重用”和“混入组件自己的选项”。一般来说,混入可食用场景的物体都是可重复使用的部分。比如有些方法是通用的,就放到mix-in里面。哪些vue文件需要直接导入到mixin文件中,然后mixin就可以直接吃掉了。很简单。Mixin规则当组件和mixin对象包含具有相同名称的选项时,这些选项将以适当的方式“合并”。例如,数据对象在内部递归合并,发生冲突时组件数据优先。emitter.js是什么?进去看看。functionbroadcast(componentName,eventName,params){this.$children.forEach(child=>{varname=child.$options.componentName;if(name===componentName){child.$emit.apply(child,[eventName].concat(params));}else{broadcast.apply(child,[componentName,eventName].concat([params]));}});}exportdefault{方法:{dispatch(componentName,eventName,params){varparent=this.$parent||这个.$root;varname=parent.$options.componentName;while(parent&&(!name||name!==componentName)){parent=parent.$parent;if(parent){name=parent.$options.componentName;}}if(parent){parent.$emit.apply(parent,[eventName].concat(params));}},broadcast(componentName,eventName,params){broadcast.call(this,componentName,eventName,params);}}};代码如上,只有几行,问题不大,大家慢慢消化吧。dispatch和broadcast这两个词属性不是,vue1.0文档中有这两个api。Vue2.0被废弃了。官方考虑是基于组件树结构的事件流方式确实比较难理解,而且在组件结构扩展的过程中会越来越脆弱。特别是当组件层次结构很深时。广播和事件分发的机制比较混乱。对了,废弃的api怎么又捡起来用了?是不是很傻?放轻松,让我们慢慢来。
