element源码（六）checkbox 多选框组件

系列文章目录

第一章 element源码（一）简要介绍
第二章 element源码（二）Layout 布局组件
第三章 element源码（三）色彩、字体、边框与图标
第四章 element源码（四）button按钮组件
第五章 element源码（五）radio 单选框组件
第六章 element源码（六）checkbox 多选框组件

---

---

一、radio组件

 <label class="el-checkbox">
    <span class="el-checkbox__input">
      <input class="el-checkbox__original"
             type="checkbox"
             v-model="model">
    </span>
    <span class="el-checkbox__label"
          v-if="$slots.default || label">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>
  </label>

label标签包裹 选择框input type="checkbox" 和 label
这里有个处理可以学习一下，和vue相关的，这个我在自己封装组件时也用上了实用性很高,$slots.default用来判断父组件有没有插槽内容

   <span class="el-checkbox__label"
          v-if="$slots.default || label">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>

二、逻辑实现

value / v-model 绑定值 string / number / boolean

这个地方有个组件库利用vue指令v-model处理数据传输的方法

//子组件计算属性
computed: {
 model: {
      get () {
        return this.isGroup
          ? this.store : this.value !== undefined
            ? this.value : this.selfModel;
      },

      set (val) {
        if (this.isGroup) {
          this.isLimitExceeded = false;
          (this._checkboxGroup.min !== undefined &&
            val.length < this._checkboxGroup.min &&
            (this.isLimitExceeded = true));

          (this._checkboxGroup.max !== undefined &&
            val.length > this._checkboxGroup.max &&
            (this.isLimitExceeded = true));

          this.isLimitExceeded === false &&
            this.dispatch('ElCheckboxGroup', 'input', [val]);
        } else {
          this.$emit('input', val);
          this.selfModel = val;
        }
      }
    },
  }

这里代码不看isGroup,是组件库为处理分组的处理。get取父组件value，set触发父组件input事件传参

// 父组件
<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

这里父组件没有通过触发的input事件取子组件传的值，那么是怎么取到值的呢
这里涉及v-model的原理，v-model是语法糖

//v-model
<input type="text" v-model="name">
//:value
<input type="text" :value="name" @input="_input">
_input(e){
    this.name=e.target.value
  }
}

所以实际上父组件已经通过v-model内封装的input事件取到了值，这个方法在自己封装的组件中也是常用的