本文详解如何构建一个可复用的 toggleswitch 组件，解决因缺少 name 属性和误用赋值运算符导致的单选失效问题，并规范使用 props、slot 与 input 事件实现双向绑定。

本文详解如何构建一个可复用的 toggleswitch 组件，解决因缺少 name 属性和误用赋值运算符导致的单选失效问题，并规范使用 props、slot 与 input 事件实现双向绑定。

在 Vue 中封装自定义表单控件（如切换按钮）时，必须严格遵循表单元素的原生行为逻辑。你提供的 ToggleSwitch 组件存在两个关键问题：一是所有 radio 按钮缺少统一的 name 属性，导致浏览器无法识别为同一组单选选项；二是 :checked="option = value" 错误地使用了赋值运算符 =，应改为严格相等判断 ===（或 ==），否则每次渲染都会触发副作用赋值，破坏响应式数据流。

此外，为支持 v-model 语法糖，组件需满足：

• 接收名为 value 的 prop（已实现）；
• 在用户交互时通过 $emit('input', newValue)（Vue 2）或 $emit('update:value', newValue)（Vue 3）通知父组件更新；
• 为所有 <input type="radio"> 设置相同的 name 属性——这是浏览器实现单选互斥的核心机制。

以下是修复后的完整组件代码（兼容 Vue 2，若使用 Vue 3 需调整事件名）：

<!-- ToggleSwitch.vue -->
<template>
  <div class="toggle-switch">
    <label v-for="(label, option) in options" :key="option" class="toggle-option">
      <input
        type="radio"
        :name="name"           <!-- ✅ 关键：统一 name 实现单选互斥 -->
        :value="option"
        :checked="option === value"  <!-- ✅ 修正：使用 === 替代 = -->
        @change="$emit('input', option)"
      />
      <slot :name="option">
        {{ label }}
      </slot>
    </label>
  </div>
</template>

<script>
export default {
  name: 'ToggleSwitch',
  props: {
    value: {
      type: String,
      required: true
    },
    name: { // ✅ 新增必填 prop，用于 radio 分组
      type: String,
      required: true
    },
    options: {
      type: Object,
      required: true,
      validator: (val) => Object.keys(val).length > 0
    }
  }
}
</script>

<style scoped>
.toggle-switch { display: flex; gap: 1rem; }
.toggle-option { display: flex; align-items: center; cursor: pointer; }
.toggle-option input { margin-right: 0.5rem; }
</style>

在父组件中使用时，必须传入 name 属性（值需唯一且稳定，避免动态生成）：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

立即学习“前端免费学习笔记（深入）”；

<template>
  <toggle-switch 
    v-model="value" 
    name="payment-mode"     <!-- ✅ 必须提供静态 name -->
    :options="options"
  >
    <template #Single>
      <span class="label">单次购买</span>
    </template>
    <template #Subscription>
      <span class="label">订阅服务</span>
    </template>
  </toggle-switch>
</template>

<script>
import ToggleSwitch from '../components/ToggleSwitch.vue'

export default {
  components: { ToggleSwitch },
  data() {
    return {
      value: 'Single'
    }
  },
  computed: {
    options() {
      return {
        Single: '单次购买',
        Subscription: '订阅服务'
      }
    }
  }
}
</script>

⚠️ 注意事项：

• name 属性不可省略，也不建议用 :name="Math.random()" 等动态值，否则每次渲染生成新 name 将导致所有 radio 失去关联；
• Vue 3 中 v-model 默认监听 update:modelValue 事件，如需兼容，可添加 modelValue prop 并 emit 'update:modelValue'，或显式声明 model: { prop: 'value', event: 'input' }（仅 Vue 2）；
• 插槽作用域 #Single 中的 Single 必须与 options 对象的 key 完全一致（区分大小写）；
• 若需样式增强（如模拟 iOS 开关），建议在 <label></label> 上添加点击反馈，并通过 CSS :checked + .custom-toggle 控制伪元素状态。

通过以上修正，你的 ToggleSwitch 组件即可稳定支持双向绑定、插槽定制与语义化单选行为，真正成为可复用、易维护的 UI 基础组件。