Vue ToggleSwitch组件Props与Emit使用问题排查求助

你的切换按钮组件存在两个核心问题，加上一个可选优化点，修复后即可正常工作：

1. 选中状态判断错误 #

组件里的:checked="option = value"使用了赋值运算符=，这会把父组件传入的value值强制赋给option，而非判断两者是否相等，直接导致选中状态完全混乱。需替换为严格相等运算符===，用来准确判断当前选项是否与父组件的value匹配。

2. Slot标签未正确闭合 #

模板中的<slot>标签未完整闭合，会引发DOM渲染异常，需将其修改为<slot :name="option">{{ label }}</slot>，确保标签结构完整。

3. 可选优化：添加Radio分组name属性 #

若页面同时使用多个该组件，未分组的radio会互相干扰，建议给input添加name属性，确保同一组件内的radio属于同一组：

• 在组件props中新增groupName属性，默认值设为'toggle-group'
• 给input绑定:name="groupName"

修复后的组件代码 #

<template>
  <div>
    <label v-for="(label, option) in options" :key="option">
      <input
        type="radio"
        :value="option"
        :checked="option === value"
        :name="groupName"
        @change="$emit('input', option)"
      />
      <slot :name="option">{{ label }}</slot>
    </label>
  </div>
</template>
<script>
export default {
  name: 'ToggleSwitch',
  props: {
    value: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      required: true
    },
    groupName: {
      type: String,
      default: 'toggle-group'
    }
  }
}
</script>

父组件使用代码（无需修改，保持原样即可） #

<toggle-switch v-model="value" :options="options">
  <template #Single>
    <p>test slot</p>
  </template>
  <template #Subscription>
    <p>test slot2</p>
  </template>
</toggle-switch>
<script>
import ToggleSwitch from '../components/ToggleSwitch.vue'
export default {
  components: {
    ToggleSwitch,
  },
  data() {
    return {
      value: 'Single',
      users: useUsersListStore(),
    }
  },
  computed: {
    options() {
      return {
        Single: 'ggg',
        Subscription: 'bbb',
      }
    }
  },
}
</script>

修复后组件可正常响应v-model绑定，正确显示选中状态，插槽内容也能正常渲染，同时支持在多场景下复用且互不干扰。

内容的提问来源于stack exchange，提问作者m.ma