饿了么el-radio先宏观剖析一下,首先看看radio有几种状态或者说有几种应用形式吧。
- 独自食用
单选框组
- 一般radio
- button radio
所以源码就有了这几个文件
咱们先解读radio.vue这个文件
模板局部咱们疾速略过...
咱们间接看js局部
import Emitter from 'element-ui/src/mixins/emitter'; export default { name: 'ElRadio', mixins: [Emitter],}
mixins 知多少
混入 (mixin) 提供了一种非常灵活的形式,来散发 Vue 组件中的可复用性能。一个混入对象能够蕴含任意组件选项。当组件应用混入对象时,所有混入对象的选项将被“混合”进入该组件自身的选项。
下面是官话,不过都是精髓,下面有几个要害的中央‘可复用’ ,‘混入组件的自身的选项’。
- 食用场景
个别被混入的对象是可复用的局部,比方一些办法具备通用性,就放到混入外面,哪些vue文件需用间接improt导入混入文件,而后mixins 就能够间接食用。灰常简略。
- 混入规定
当组件和混入对象含有同名选项时,这些选项将以失当的形式进行“合并”。
比方,数据对象在外部会进行递归合并,并在发生冲突时以组件数据优先。
emitter.js 是什么
进去看看吧
function broadcast(componentName, eventName, params) { this.$children.forEach(child => { var name = child.$options.componentName; if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { broadcast.apply(child, [componentName, eventName].concat([params])); } });}export default { methods: { dispatch(componentName, eventName, params) { 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; } } 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饿了么又捡起来用呢,是不是傻呀。不急不急咱们缓缓看嘛。