饿了么el-radio先宏观剖析一下,首先看看radio有几种状态或者说有几种应用形式吧。

  1. 独自食用
  2. 单选框组

    • 一般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饿了么又捡起来用呢,是不是傻呀。不急不急咱们缓缓看嘛。