支持取消单选组件vue版

原生的单选就是<input type="radio"/>，正常情况在name相同的单选之间只能选一个，如果只有一个单选框的情况下，一经选中是无法自己取消的，和checkbox不一样。但是有时我们的需求是需要有一个radio，并且还要支持能选中和取消的。
当radio的被选中的时候，其实它的checked属性是true，取消时为false。并且如果直接设置checked属性的值也能直接改变radio的选中与否。
我们也可以依此写成个简单的vue组件。

<template>
  <input
    type="radio"
    :id="label"
    ref="radio"
    @click="onClick"
    :value="innerChecked"
  />
</template>
<script>
export default {
  name: 'RadioToggle',
  props: {
    value: Boolean,
    label: String
  },
  data() {
    return {
      innerChecked: false
    };
  },
  mounted() {
    this.innerChecked = this.value;
  },
  methods: {
    onClick() { // 支持单个单选框选中/取消相互切换，选中态与isChecked保持一致
      this.innerChecked = !this.innerChecked;
    },
    updateCheck() {
      this.$refs.radio.checked = this.innerChecked;
      this.$emit('input', this.innerChecked);
    },
  },
  watch: {
    value() {
      this.innerChecked = !!this.value;
    },
    innerChecked() {
      this.updateCheck();
    }
  }
}
</script>

一个简单的vue双向绑定组件就完成了。