一、封装radio组件

1.参数支持

参数名称	参数类型	参数描述	默认值
v-model	任意类型	双向绑定	无
label	Boolean,String, Number	单选框的value值	无
name	Boolean	双向绑定	false

1.1. 获取label、name、value属性与自定义内容

使用props获取用户传入的label、name属性。
由于支持v-model属性，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，所以用props接收value属性。
用插槽获取用户写入的内容。

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

props: {
 label: {
   type: [String, Number, Boolean],
   default: ""
 },
 value: null,
 name: {
   type: String,
   default: ""
 }
},

1.2. 设置v-model

由于原生的单选框很难设置样式，所以把原生的单选框给隐藏起来，展示一个自己设计的便于修改样式的单选框。
原生的单选框虽然被隐藏起来，但是依旧要保留其功能，因此设置

name属性为用户传入的name，
value属性为用户传入的label，
设置v-model属性来实现原生单选框的双向绑定，其属性值不能为用户传入的value值，因为子组件无法改变父组件传入的值，所以需要设置一个model状态来实现双向绑定。由于model值受用户传入的value值的影响，所以应该使用computed来设置它。如果用v-model绑定一个计算属性，那么该属性必须用get、set，而不能使用简单的函数设置，所以给model设置get、set方法。当get时返回用户传入的value值。 当set时，即model改变时，父组件的value也应该改变，所以此处需要触发父组件的input事件来改变父组件的value值。

当用户传入的label值等于model值时，则选中当前单选框，设置is-checked类来表示选中。

  <label class="zh-radio" :class="{'is-checked': label === model}">
    <span class="zh-radio__input">
      <span class="zh-radio__inner"></span>
      <input class="zh-radio__original" 
        type="radio" 
        :value="label"
        :name="name"
        v-model="model">
    </span>
    .....
  </label>

computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
}

系列文章

以下是从0搭建Vue2 UI组件库系列的文章，有需要的同学请冲~~ 从0搭建Vue2 UI组件库（一）