Vue复习姿势系列之UI组件——单选框(Radio)

2023-11-07 12:49:49

打造交互式界面：深入探索 Vue 单选框

单选框：用户偏好的有力工具

单选框在交互式界面中扮演着不可或缺的角色，允许用户在多个选项中进行单一选择。它们广泛应用于表单、调查和偏好设置中，为用户提供便捷的选择机制。

使用 Vue 构建单选框

Vue，一个功能强大的 JavaScript 框架，为单选框的实现提供了简便而强大的方法。通过利用 class 绑定和 v-model 指令，我们可以轻松创建响应式且可重用的单选框组件。

<template>
  <div class="radio">
    <input type="radio" :id="id" :name="name" :value="value" v-model="checked">
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: false
    }
  }
};
</script>

父子通信：勾选单选框

当用户勾选单选框时，我们需要将选中的值传达给父组件。通过使用 v-model 指令，我们可以实现响应式的父子通信。当子组件中单选框的 checked 属性发生变化时，父组件中绑定的数据也会随之更新。

示例：整合单选框组件

<template>
  <div>
    <radio id="radio-1" name="radio-group" value="option1" label="选项1" v-model="selectedValue"></radio>
    <radio id="radio-2" name="radio-group" value="option2" label="选项2" v-model="selectedValue"></radio>
  </div>
</template>

<script>
import Radio from './Radio.vue';

export default {
  components: {
    Radio
  },
  data() {
    return {
      selectedValue: 'option1'
    };
  }
};
</script>