乐趣区

关于javascript:elementui源码解读radio

jiezi

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

退出移动版