Vue.js：当Prop无值时如何传递0以避免报错

嘿，这个场景我太熟悉了！咱们来聊聊几种靠谱的解决方案，按需选就行～

1. 直接在模板里用默认值（你当前写法的优化版） #

你现在写的totalScore || 0其实已经能解决大部分问题，但可以根据业务场景调整得更精准：

• 如果只需要在totalScore是null或undefined时用0（其他假值比如合法的0想保留），推荐用空值合并运算符??，它比||更严谨：

  <score :totalScore="totalScore ?? 0"></score>
  

• 如果所有假值（包括空字符串这类）都要转成0，那你原来的写法就完全没问题：

  <score :totalScore="totalScore || 0"></score>
  

2. 让组件自己处理默认值（最优雅的方式） #

既然totalScore是score组件的专属属性，不如把边界处理逻辑放到组件内部，父组件就不用每次都操心了！在score组件的props里设置默认值：

// Score.vue 组件内部代码
export default {
  props: {
    totalScore: {
      type: Number, // 指定类型，提前拦截非数字输入
      default: 0    // 没传值或传undefined时自动用0兜底
    }
  }
}

之后父组件直接写<score :totalScore="totalScore"></score>就行——哪怕totalScore没值，组件自己会自动用0，超省心！

3. 用计算属性做统一处理（适合复杂场景） #

如果totalScore的来源比较复杂（比如从多个变量拼接、或者需要额外格式处理），可以在父组件里写个计算属性来归一化值：

// 父组件内部代码
export default {
  data() {
    return {
      totalScore: null // 可能为null/undefined/整数/甚至字符串类型数字
    }
  },
  computed: {
    normalizedTotalScore() {
      // 这里可以加各种自定义逻辑，比如强制转数字+兜底0
      const num = Number(this.totalScore)
      return isNaN(num) ? 0 : num
      // 简单场景也可以直接写：return this.totalScore ?? 0
    }
  }
}

然后模板里绑定这个处理好的计算属性：

<score :totalScore="normalizedTotalScore"></score>

如果遇到后端返回字符串类型的数字（比如"88"），记得用Number()或者parseInt()转成数字类型，避免组件接收非数字值报错～

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