Vue.js radio单选按钮无响应 子组件值无法同步更新到父组件如何解决

现存问题梳理 #

• 子组件侧问题：
  • 标签写法不规范，混用<radio>和闭合标签</el-radio>
  • v-model绑定的type变量未在子组件data中声明，会导致绑定失效
  • 为每个单选框单独定义change事件方法，代码冗余
• 父组件侧问题：
  • onTypeChange回调没有接收子组件emit传递的选中值参数，拿不到切换后的最新值
  • 回调内的判断逻辑存在低级错误：自定义的TypeOne、TypeTwo变量均被赋值为false，TypeOne == TypeOne是恒成立的表达式，导致无论选中哪个单选框，都只会走第一个分支将type设为false
  • data中type初始值设为字符串'true'，和后续赋值的布尔值类型不统一，可能引发判断异常

修复后代码 #

子组件 #

<template>
  <!-- 统一使用el-radio标签，也可以用el-radio-group包裹简化代码 -->
  <el-radio v-model="type" value="TypeOne" @change="handleChange"></el-radio>
  <el-radio v-model="type" value="TypeTwo" @change="handleChange"></el-radio>
</template>

<script>     
export default {
  data() {
    return {
      // 声明v-model绑定的变量，可自行设置默认选中值
      type: 'TypeOne'
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.type)
    }
  }
}
</script>

父组件 #

<template>
 <component @input="onTypeChange"></component>
 <div v-show="type"></div>
 <div v-show="!type"></div>
</template>

<script>
export default {
  data() {
    return {
      // 统一为布尔值类型，按需求设置初始值即可
      type: true
    };
  },
  methods: {
    // 接收子组件传递的选中值
    onTypeChange (val) {
      // 按原有逻辑：选中TypeOne时type为false，选中TypeTwo时type为true
      this.type = val === 'TypeTwo'
    }
  }
}
</script>

可选优化 #

如果想进一步简化代码，可以直接使用v-model绑定子组件，无需单独监听input事件：
父组件绑定写法改为<component v-model="type"></component>，配合子组件的input emit规则即可直接实现双向绑定。

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