封装组件单选按钮

子组件一

<template>
  <div class="co-radio-box">
    <input
      class="co-radio-input"
      type="checkbox"
      :checked="value === cehckedValue"
    />
    <label class="co-radio-label" @click="toggle">{{ label }}</label>
  </div>
</template>
<script>
export default {
  props: ["label", "value"],
  data() {
    return {
      cehckedValue: "",
    };
  },
  mounted() {},
  methods: {
    toggle() {
      this.$parent.trigger("input", this.value);
    },
  },
};
</script>
<style scoped>
.co-radio-box {
  display: inline-block;
}
.co-radio-input {
  display: none;
}
.co-radio-input:checked + .co-radio-label {
  color: blueviolet;
}
.co-radio-label {
  width: 120px;
  height: 50px;
  font-size: 16px;
  border: 1px solid rgb(236, 180, 180);
  padding: 5px 10px;
}
</style>

子组件二

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: ["value"],
  data() {
    return {};
  },
  watch: {
    value() {
      this.updatedValue();
    },
  },
  mounted() {
    this.updatedValue();
  },
  methods: {
    updatedValue() {
      this.$children.forEach((item) => (item.cehckedValue = this.value));
    },
    trigger(fun, data) {
      this.$emit(fun, data);
    },
  },
};
</script>

父组件

<template>
  <div class="box">
    <coRadioMain v-model="sex">
      <coRadio
        v-for="(item, index) in data"
        :key="index"
        :value="item.value"
        :label="item.label"
      ></coRadio>
    </coRadioMain>
  </div>
</template>
<script>
import coRadio from "@/components/coRadio";
import coRadioMain from "@/components/coRadioMain";
export default {
  data() {
    return {
      sex: "",
      data: [
        { value: "ee", label: "first" },
        { value: "ww", label: "second" },
        { value: "qq", label: "thirdly" },
        { value: "rr", label: "fourthly" },
      ],
    };
  },
  components: { coRadio, coRadioMain },
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.box {
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
}
</style>