radio单选框组件

问题1：

当用户传入内容的时候，就将传入的内容展现，如果不传入内容的时候，就展现默认的label

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

解决办法

使用插槽，使用v-if判断如果没传就显示默认的一个template放个label

问题2（绕了一个小时）

如何实现点击选择，样式改变。

解决办法

使用动态绑定样式的类名来实现。

1.父组件为子组件传入label,子组件props接收到之后v-bind到value。

2.父组件 v-model="gender"，子组件接收： value: null,这个v-model是个语法糖，别被绕晕了。

3.value收到了不能改！子组件不能懂父组件的内容，于是子组件v-model="model"绑定自己的model值，使用计算属性获取操作这个值。

      computed: {
        model: {
          get() {
            return this.value; //获取到父组件的gender
          },
          //val是v-model绑定的值
          set(val) {
            console.log(val); //1.点击选中先走这里，val就是input里面value接收到的label值1
            this.$emit("input", val); //去控制父组件的gender
          },
        },
      },

上面通过触发父组件的input事件来修改父组件的gender,v-model是个语法糖。

4.于是gender被修改了，第二步value接收到的值变化了！而且变成1了，看set里面的注释，所以只需要通过判断label是否等于value或者label是否等于model即可，因为value是model计算出来的。

5.样式class动态绑定：

 <label class="one-radio" :class="{ 'is-checked': value === label }">