elemnt ui checkBOx 原理猜测

第一节 Radio 单选框

​ 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

1.关于 label 和radio

label 不一样，v-model 一样，两个里面只能任选其一

label 可以是任意的值

而且 我们看到v-model 有两种用法，一种在多个el-radio上部署同样的v-model值，一种是在el-radio-group上部署v-model

2.关于disabeld

如果，你在el-radio-group 上使用了disabled，他的两个都是disabled。

3.el-radio-button 为按钮选项

4.size 和border

关于size el-radio-group 是有的，但是他也直接作用在了子组件上。

5.radio 有绑定事件 change

打印出来的是label的值

6.关于使用组件的自定义事件

使用单个的el-radio 应该是可以的，但这样的意义不大，我们仅将change事件作为一个触发条件，但是这样还是会有一些的问题，那就是父子之间传递信息的问题，这要等到以后，等我们的技术，已经可以深入element ui的底层源码。

第二节 Checkbox 多选框

cheacked 的属性基于radio进一步增加，原先的属性还是都是合适的在这里。

1.checked

是否勾选

2.关于checked 和v-model

cheacked = true 是肯定会勾选的，但是同样的v-model ，他是有值。

这里我们在el-radio 的时候忽略了。

我们这里则是不可以这样。

因为我们知道v-model 一个绑定值，一个来自子组件的信息来改变这个绑定值。

checked 只有两个值一个true 一个false ，所以你就理解了。

在这里我们发现label 和v-model 的值都是不想等的。

很简单吗原因，因为他是多选吗！

3.true-label和false-label

一个绑定时候的值，一个不是绑定的时候的值

4.isIndeterminate的问题

当我们按下@change=“handleCheckAllChange”

他给我们返回的值是true 或者false

当我们按下handleCheckedCitiesChange的时候

他传递的值就是checkedCities

接下来我们对group进行分析

我们知道v-model 和@checked事件，从子组件那里来的

首先 ，我要将v-model拆开

@change="handleCheckedCitiesChange

v-model=“checkedCities”

我们假设绑定的值是value

v-bind:value=checkedCities

v-on:input=“checkedCities= $event.target.value”

一开始当我们还没有动的时候，其实v-model 已经进行一次转移。

在这里我们看到了

这里是从

而group则是

value就是已经是确定了。

根据以上的数据和下面的流程，我们发现小组件应该就一个$emit，

子组件是一个change，它发过来一个checked 状态。

父组件的change也是很好理解，子组件提交了change 事件引发的。他就是一个监听作用。

但是第一个input是什么回事呢？

$listener 可以解决这个问题，而且子组件肯定接受了checkedCities。这样将label 和其组合，才能返回input时候的，但是我们别忘了CheckBox 知识触发了一次事件。而且人家提交的true 和event

这样才能促使父组件中的绑定数据更新。

翻看代码发现不是

他用到了Vuex ，看来单单一个组件还是I无法实现该功能的。

他们通过其他的手段，检测value值也就是城市的变化。

猜测与现实的差距，

在我的猜测里我一直认为$listener的原生事件也会发生冒泡，导致按了子组件，从而影响父组件。实际它是有点关联，又有点分开。

这里我们提出疑问让现实离我们近一点

1.点击了子组件却先引发了父组件
2.input 先更新了v-model 和绑定的数据，这样才能引发chane事件。那么子组件的change事件到底是触发前者还是后者。（第二点也就是为什么我会猜想$listener）

我们先来分清楚两个嵌套挂载点与对应的子组件的功能
1.handleCheckedCitiesChange

他和他的子组件的信息应该是 子组件中要么事件绑定方法要么元素上直接绑定事件$emit（“change”，城市数组）。
2.v-bind:value=checkedCities

v-on:input=“checkedCities= $event.target.value”

他的子组件中肯定有props 接受了绑定值，input 是接受来自子组件的$emit（“input”，城市数组）。

剩下的问题就是，这个label到底怎么发射出去的。我们看到watch ，然后好多的疑问。显然我的猜测中的问题你已经看到了。
其他的你可以模仿，或者用的思路，但是关键你要解决怎么把这个数组更新。

还有label，到底是啥，难道就是个属性。显然不是。他还有很多的配合工作
element 就像一个巨大的宝库。不过半年，你也要封装。