记一次取消ui库的radio过程

概述
ui库用的是iview . radio、radioGroup是我们非常常用的组件。radio有一个特征是选中之后无法取消。现实中取消radio的需求是常见且可以理解的。所以看到这个需求之后第一尝试 在iview组件之上搞一搞，这一搞就入坑了，现在就来理一理我的入坑之路吧。
1. 原生组件radio的取消
首先我们来看一下在 vue 中使用原生的radio组件如何使用取消。 原生radio取消选中的文章非常多，随便拎一篇看看就行，比如 取消radio的三种方法。嗯，原理就是给radio元素的checked属性赋值为 false。具体在 vue 中使用是这样的:
const { name, value } = data;
<div>
<input
class=”xxx”
type=”radio”
name={this.id}
ref={name}
value={value}
onClick={(vlaue) => this.radioGroupChange(value, name)}
/>
{name}
</div>;

// 方法
radioGroupChange (value, name) {
if (this.checked === value) {
// 取消选中
this.$refs[name].checked = false;
// 当前选中值为空
this.checked = ”;
} else {
this.checked = value;
}
}
这样就OK了。大概唯一区别是 在 vue中通过 ref取到真实 dom。
2. iview中radio取消之路
借鉴原生的radio，看来取消也不难嘛，监听radio或者 radio的change事件嘛。然而你会发现，重复点选某一个 radio的时候，iview中的on-change函数跟本木有响应。这是为什么呢？ 去 iview 源码中看一看
2.1 iview组件radio源码探究
先上代码为敬:先看下 radio.vue的 template
<template>
<label :class=”wrapClasses”>
<span :class=”radioClasses”>
<span :class=”innerClasses”></span>
<input
type=”radio”
:class=”inputClasses”
:disabled=”disabled”
:checked=”currentValue”
:name=”groupName”
@change=”change”
@focus=”onFocus”
@blur=”onBlur”>
</span><slot>{{ label }}</slot>
</label>
</template>
再看下 change的响应函数
change (event) {
// debugger
if (this.disabled) {
return false;
}

const checked = event.target.checked;
this.currentValue = checked;

const value = checked ? this.trueValue : this.falseValue;
this.$emit(‘input’, value);

if (this.group) {
if (this.label !== undefined) {
this.parent.change({
value: this.label,
checked: this.value
});
}
} else {
this.$emit(‘on-change’, value);
this.dispatch(‘FormItem’, ‘on-form-change’, value);
}
},
一开始怀疑 change事件中对 value做了处理，只有 不一样的时候才 emit，仔细看，change函数中并没有这部分处理。问题在于 input 这里监听的 change 事件而不是 click事件，所以反复点击同一个 radio的时候没有 响应是正常的。
2.2 如何监听到 click事件
看到上面是不是就想 我在 radio上绑定一个click 事件就可以了；事实证明是不可以的，为什么呢？