如何正确实现支持 v-model 的可复用单选切换按钮组件-js教程-PHP中文网

如何正确实现支持 v-model 的可复用单选切换按钮组件

本文详解如何基于 Vue 2 的 v-model 机制，构建一个支持 props 配置、插槽定制和事件通信的 ToggleSwitch 组件，并修复常见错误（如 :checked 误用赋值运算符、缺失 name 属性导致无法互斥选择）。

本文详解如何基于 vue 2 的 `v-model` 机制，构建一个支持 props 配置、插槽定制和事件通信的 toggleswitch 组件，并修复常见错误（如 `:checked` 误用赋值运算符、缺失 `name` 属性导致无法互斥选择）。

在 Vue 开发中，封装一个可复用的单选切换按钮（Toggle Switch）是高频需求。但初学者常因对 v-model 原理、表单控件绑定规则或响应式细节理解不足而踩坑。下面我们将从问题出发，逐步构建一个健壮、语义清晰、符合 Vue 2 最佳实践的组件。

✅ 核心原理：`v-model` 在自定义组件中的实现

Vue 2 中，v-model 是语法糖，等价于：

<toggle-switch :value="value"> value = val" /></toggle-switch>

因此，组件必须：

接收名为 value 的 prop（类型需与业务一致，此处为 String）；
在用户交互时通过 $emit('input', newValue) 向父组件同步变更。

⚠️ 常见错误及修正

错误 1：`:checked="option = value"` → 赋值而非比较

= 是赋值操作符，会导致 option 被意外覆盖为 value 的值，且表达式始终返回真值，所有单选框均被“选中”。
✅ 正确写法：使用严格相等 ===（或 ==，但推荐 ===）：

:checked="option === value"

错误 2：缺失 `name` 属性 → 单选逻辑失效

HTML 规范要求：同一组单选按钮必须具有相同的 name 属性，否则浏览器无法识别其互斥关系，导致多选并存。
✅ 解决方案：新增 name prop，并透传至每个：

<input type="radio" :name="name" ...>

父组件调用时必须显式传入唯一 name：

<toggle-switch v-model="value" name="plan-type" :options="options"></toggle-switch>

✅ 完整修正版组件代码（`ToggleSwitch.vue`）

<template><div class="toggle-switch">
    <label v-for="(label, option) in options" :key="option" class="toggle-option">
      <input type="radio" :name="name" :value="option" :checked="option === value" option class="toggle-input"><span class="toggle-label">
        <slot :name="option">
          {{ label }}
        </slot></span>
    </label>
  </div>
</template><script>
export default {
  name: 'ToggleSwitch',
  props: {
    value: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true,
      validator: (val) => val.trim() !== ''
    },
    options: {
      type: Object,
      required: true,
      default: () => ({})
    }
  }
}
</script><style scoped>
.toggle-switch { display: inline-flex; }
.toggle-option { margin-right: 1rem; }
.toggle-input { margin-right: 0.5rem; }
</style>

✅ 父组件调用示例（含插槽定制）

<template><div>
    <toggle-switch v-model="selectedPlan" name="subscription-plan" :options="planOptions"><template><span class="plan-badge">⚡ Single User</span>
      </template><template><span class="plan-badge">? Monthly Plan</span>
      </template></toggle-switch><p>当前选择: {{ selectedPlan }}</p>
  </div>
</template><script>
import ToggleSwitch from '../components/ToggleSwitch.vue'

export default {
  components: { ToggleSwitch },
  data() {
    return {
      selectedPlan: 'Single'
    }
  },
  computed: {
    planOptions() {
      return {
        Single: 'Standalone License',
        Subscription: 'Recurring Access'
      }
    }
  }
}
</script>

? 注意事项与最佳实践

必传 name：切勿省略 name prop，它是单选逻辑的基石；
插槽命名一致性：中的 option 必须与 options 对象的 key 完全匹配（区分大小写）；
避免 v-model 与 :value + @input 混用：在子组件内部不要同时监听 input 事件并修改 value，这会破坏单向数据流；
Vue 3 兼容提示：若升级至 Vue 3，v-model 默认事件名变为 update:modelValue，需调整 emit 逻辑（本文基于 Vue 2）；
可访问性增强（进阶）：可为添加 for 属性或使用 aria-labelledby 提升屏幕阅读器支持。