element-ui源码解读-radio

饿了么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饿了么又捡起来用呢，是不是傻呀。不急不急我们慢慢看嘛。