radio-group组件 | 星城哈哈

# radio-group组件

使用radio组件的缺点, 需要给每个组件都绑定v-model, 可以使用radio-group包裹

radio-group组件

# 前置知识点

provide和inject

# 基本结构

结构

<template>
  <div class="xc-radio-group">
    <slot></slot>
  </div>
</template>

1
2
3
4
5

数据

export default {
  name: "XcRadioGroup",
  provide() {
    return {
      RadioGroup: this
    };
  },
  props: {
    // xc-radio-group接收到了 value值
    // 将来还需要触发 当前组件的input事件
    // provide 与 inject
    value: null
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 修改radio组件

接收inject

  inject: {
    RadioGroup: {
      default: ""
    }
  }

1
2
3
4
5

计算属性

  // 需要提供一个计算属性
  computed: {
    model: {
      get() {
        return this.isGroup ? this.RadioGroup.value : this.value;
      },
      set(value) {
        // 触发父组件给当前组件注册的input事件
        // this.$emit("input", value);
        this.isGroup? this.RadioGroup.$emit('input',value) : this.$emit('input',value)
      }
    },
    isGroup() {
      // 用于判断radio是否被radioGroup所包裹
      return !!this.RadioGroup;
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

← radio组件 checkbox组件 →