Vue.js 2父组件向子组件传字符串prop，子组件接收为undefined问题求助

算力阿峰

2026-9-26

问题原因及修复方案

核心错误1：Prop命名规则不匹配

Vue 2 的HTML模板中属性名不区分大小写，驼峰格式的Prop在父组件传递时必须转为短横线分隔命名：

子组件定义的Prop是驼峰格式sensorType，父组件模板中传递时不能写:sensorType，要改为:sensor-type，否则Vue会将属性识别为全小写的sensortype，和子组件声明的Prop无法匹配，自然返回undefined。

父组件模板修改后代码：

<ls-sensor v-if="lsSensor" :sensor-type="checkedSensor" />

错误2：事件触发与变量更新的时序问题

Vue 2 中v-model的赋值更新时机晚于change事件触发时机，你在change回调中直接切换子组件显示状态时，checkedSensor还没被赋予最新的选中值，子组件渲染时拿到的还是旧值。

修复方案：用$nextTick包裹组件显隐逻辑，等变量赋值完成后再渲染子组件，修改后的showDeviceComponent方法：

showDeviceComponent(e) {
  this.$nextTick(() => {
    if (e == "ls") {
      this.lsSensor = true;
      this.crSensor = false;
      this.dgSensor = true;
      console.log("file input component", this.checkedSensor)
    } else if (e == "dg") {
      this.dgSensor = true;
      this.lsSensor = false;
      this.crSensor = false;
    } else {
      this.crSensor = true;
      this.dgSensor = false;
      this.lsSensor = false;
    }
  })
}