本文详解如何基于 Vue 2 的 v-model 机制，构建一个支持 props 配置、插槽定制和事件通信的 ToggleSwitch 组件，并修复常见错误（如 :checked 误用赋值运算符、缺失 name 属性导致无法互斥选择）。
本文详解如何基于 vue 2 的 `v-model` 机制，构建一个支持 props 配置、插槽定制和事件通信的 toggleswitch 组件，并修复常见错误（如 `:checked` 误用赋值运算符、缺失 `name` 属性导致无法互斥选择）。
在 Vue 开发中，封装一个可复用的单选切换按钮（Toggle Switch）是高频需求。但初学者常因对 v-model 原理、表单控件绑定规则或响应式细节理解不足而踩坑。下面我们将从问题出发，逐步构建一个健壮、语义清晰、符合 Vue 2 最佳实践的 <toggleswitch></toggleswitch> 组件。
✅ 核心原理：v-model 在自定义组件中的实现
Vue 2 中，v-model 是语法糖，等价于：
<toggle-switch :value="value" @input="val => value = val" />
因此，组件必须：
- 接收名为
value的 prop（类型需与业务一致，此处为String）； - 在用户交互时通过
$emit('input', newValue)向父组件同步变更。
⚠️ 常见错误及修正
错误 1：:checked="option = value" → 赋值而非比较
= 是赋值操作符，会导致 option 被意外覆盖为 value 的值，且表达式始终返回真值，所有单选框均被“选中”。
✅ 正确写法：使用严格相等 ===（或 ==，但推荐 ===）：
:checked="option === value"
错误 2：缺失 name 属性 → 单选逻辑失效
HTML 规范要求：同一组单选按钮必须具有相同的 name 属性，否则浏览器无法识别其互斥关系，导致多选并存。
✅ 解决方案：新增 name prop，并透传至每个 <input type="radio">：
<input type="radio" :name="name" ... />
父组件调用时必须显式传入唯一 name：
<toggle-switch v-model="value" name="plan-type" :options="options" />
✅ 完整修正版组件代码（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"
@change="$emit('input', 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 #Single>
<span class="plan-badge">⚡ Single User</span>
</template>
<template #Subscription>
<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：切勿省略nameprop，它是单选逻辑的基石； -
插槽命名一致性：
<slot :name="option"></slot>中的option必须与options对象的 key 完全匹配（区分大小写）； -
避免
v-model与:value+@input混用：在子组件内部不要同时监听input事件并修改value，这会破坏单向数据流； -
Vue 3 兼容提示：若升级至 Vue 3，
v-model默认事件名变为update:modelValue，需调整 emit 逻辑（本文基于 Vue 2）； -
可访问性增强（进阶）：可为
<label></label>添加for属性或使用aria-labelledby提升屏幕阅读器支持。
通过以上实现，你将获得一个真正可复用、易维护、符合 Vue 生态规范的 Toggle Switch 组件——它不仅解决了基础功能，更奠定了可扩展性与专业性的基础。
