自定义组件内单选按钮选中状态异常及Vue组件事件绑定咨询

嘿，我来帮你搞定这两个问题：

一、单选按钮同时被选中的原因及修复 #

单选按钮能同时选中，核心问题是同一组的单选按钮没有共享相同的name属性——这是浏览器原生单选组实现互斥选择的必要条件。

之前用v-model的时候，Vue会自动帮你处理选中状态的关联（或者隐式维护了分组逻辑），但现在改用@click手动触发事件，就需要自己补上name属性了。

你可以给组件里的单选按钮加上:name绑定，保证同组按钮的name一致：

<input 
  type="radio" 
  :id="meta.id" 
  :value="meta.value" 
  :name="meta.group" <!-- 新增：用meta里的分组标识作为name -->
  @click="notifyParent($event.target.value)"
>

比如性别选择的场景，你给meta.group传"gender"，两个单选按钮的name就都是gender，浏览器就会自动处理互斥选中了。

如果你想保留v-model的便捷性，也可以在组件内部维护选中值，结合v-model和事件触发：

<input 
  type="radio" 
  :id="meta.id" 
  :value="meta.value" 
  :name="meta.group"
  v-model="selectedValue"
  @change="notifyParent(selectedValue)"
>

然后在组件的data里定义selectedValue，这样既利用Vue的双向绑定控制选中状态，又能触发通知父组件的逻辑。

二、把@toparent事件绑定在组件内部的实现 #

当然可以！你只需要在组件内部通过this.$emit()来触发自定义事件，把事件触发逻辑封装在组件里，父组件只需要监听事件就行。

修改你的组件脚本，在notifyParent方法里直接触发toparent事件：

Vue.component('singleselect', {
  props: ['meta'],
  methods: {
    notifyParent(value) {
      // 组件内部直接触发toparent事件
      this.$emit('toparent', value);
    }
  },
  template: `
    <div>
      <p class="form__answer">
        <input 
          type="radio" 
          :id="meta.id" 
          :value="meta.value" 
          :name="meta.group"
          @click="notifyParent($event.target.value)"
        >
        <label :for="meta.id">{{ meta.label }}</label>
      </p>
    </div>
  `
})

这样一来，用户点击单选按钮时，组件会自动触发toparent事件，父组件只需要正常监听即可：

<singleselect :meta="genderOption" @toparent="handleGenderSelect"></singleselect>

所有事件触发逻辑都封装在组件内部，不需要在外部额外绑定啦～

内容的提问来源于stack exchange，提问作者Ali Gajani