一.報錯截圖
[Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number with value NaN, got String with value "fuNum".
二.報錯代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue組件</title> </head> <body> <div id="app"> <!-- 動態使用v-bind傳遞js中的數據，但靜態只能傳輸字符串--> <wzwfuzi :dongzinum="fuNum" jingzinum="fuNum"></wzwfuzi> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 父向子組件（將父組件的數據模型綁定到子組件的模板中，實現數據提供） // 自定義全局組件（子組件），注意這里改變的zinum值不會影響父組件的fuNum值 Vue.component("wzwfuzi",{ template:"<h1>動態獲取的值==》{{dongzinum}} 靜態獲取的值==》{{jingzinum}}</h1>", props:{ // 對父組件的數據約束 dongzinum:{ type:Number, // 提交的數據類型為number（這里還可以寫其他數據類型，不過需要對上傳過來的類型） default:0, // 默認值為0 required:true// 是否必填 }, jingzinum:{ type:Number, // 靜態提交的數據類型都是String類型[錯誤位置] default:"1", // 默認值為1 required:true // 是否必填 } }, // 接受父組件傳值[自定義名:zinum] data(){ // 數據模型 return { newzinum:this.zinum // 將獲取過來的值賦值上去 } } }) // 父組件：新建Vue const app = new Vue({ el:"#app", data:{ fuNum:5 } }) </script> </html>
二.分析的原因
因為【靜態傳遞】的數據類型都是String類型
所以我們在定義jingzinum的type為數字類型number后
它接收的【數據類型不同】就出現了問題
導致了該報錯的發生
解析：
- 靜態傳遞：就是沒有用v-bind調用父組件中的js數據類型來傳值，直接傳遞了寫入的value值
- props的形式有兩種，還有一種是數組的形式，上面的這種是為了數據約束
三.解決方案
將靜態傳遞的jingzinum中的type值改為String既可
格式==》 type:String
