一、封装radioGroup组件

1.参数支持

参数名称	参数类型	参数描述	默认值
v-model	任意类型	双向绑定	无

1.1. 获取v-model

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

<div class="zh-radio-group">
    <slot></slot>
</div>

props: {
    value: null
}

1.2. 获取radioGroup组件中的value值

由于给radioGroup组件添加了v-model绑定了变化数据，所以radio组件不需要使用v-model绑定数据，所以之前写的radio组件中的value状态获取不到值，需要设置radio组件获取到用户传递给radioGroup组件的value值。

如何获取radioGroup组件中的value值呢？

由于radioGroup组件不一定是radio组件的直接父组件，所以不能使用$parent来获取radioGroup组件中的数据。可以使用provide/inject，radioGroup组件使用provide将自身组件实例分发给后代组件，radio组件通过inject接收radioGroup组件实例，从而获取到其中的value属性。

radioGroup组件分发自身组件实例：

provide() {
    return {
      RadioGroup: this
    }
},

radio组件接收radioGroup组件实例：

inject: {
    RadioGroup: {
      default: ''
    }
},

1.3. 将radioGroup组件中的数据绑定到radio组件中

由于之前的radio组件中用model状态来实现双向绑定，get时返回用户传入的value值，set时触发用户的input事件修改value值，但当radio组件被radioGroup组件包裹时，这里没有用户没有使用v-model传入value值，所以应该使用与修改radioGroup组件中的value值。

所以先设置一个计算属性isGroup来判断radio是否被RadioGroup组件包裹。若是，则model状态被get时返回radioGroup组件中的value值，被set时触发radioGroup组件中的input事件修改value值。

computed: {
    // 判断radio是否被RadioGroup组件包裹
    isGroup() {
      return !!this.RadioGroup;
    },
    model: {
      get() {
        return this.isGroup ? this.RadioGroup.value : this.value;
      },
      set(value) {
        // 当model改变时，父组件的value也应该改变，所以此处需要触发父组件的input 事件
        // this.$emit("input", value);
        this.isGroup ? this.RadioGroup.$emit("input", value) : this.$emit("input", value);
      },
    },
    
},

系列文章

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