Vue.js 报错：Invalid value for prop “xxx”. Value should be of type Number. —— 3 分钟急救手册

当你在控制台看到：

[Vue warn]: Invalid value for prop "xxx". Value should be of type Number.

Vue 在告诉你：
“父组件给 xxx 传了非数字，但子组件声明它是 Number。”
按「一看二改三兜底」三步法，3 分钟解决。

---

一、一看：定位报错行

控制台会给出 子组件文件名 + 行号，点击即可跳转到 prop 声明处。

---

二、二改：对齐类型

子组件声明	父组件当前传参	修复
Number	"123"	传数字 :xxx="123"
Number	true	传数字 :xxx="1"
Number	undefined	给默认值或 0
Number	对象/数组	传数字或改类型

---

三、三兜底：允许多类型或默认值

props: {
  xxx: {
    type: [Number, String], // 允许数字或字符串
    default: 0,
    validator: (v) => !isNaN(Number(v)) // 自定义校验
  }
}

---

四、高频翻车现场 & 修复代码

1️⃣ 字符串数字

<!-- 父组件 ❌ -->
<MyInput value="123" />

<!-- ✅ -->
<MyInput :value="123" />

---

2️⃣ 布尔值误传

<!-- 父组件 ❌ -->
<MyInput :active="true" />
<!-- 子组件期望 Number -->
props: { active: Number }

<!-- ✅ -->
<MyInput :active="1" />

---

3️⃣ 异步回填前 undefined

<!-- 父组件 -->
<MyInput :count="total" />   <!-- total 初始 undefined -->

// 子组件
props: { count: Number }

修复：初始数字或默认值

const total = ref(0);        // ✅ 初始 0
// 或子组件给默认
props: { count: { type: Number, default: 0 } }

---

4️⃣ 动态组件属性类型混用

<component :is="comp" :size="size" />

// 某些组件 size 要 Number，某些要 String
props: { size: [Number, String] } // ✅ 允许多类型

---

五、一句话总结

「Invalid value for prop」= 父组件传参类型 ≠ 子组件声明。
用 :xxx="数字" 或放宽类型/默认值，警告瞬间消失。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》