# 父子組件傳值 ## 父組件傳值給子組件 ## 我們使用組件一定是依托在某一個父組件的身上，比如我們上面寫的Mashibing.vue文件就是依托在App.vue文件中，此時我們如果要使用App.vue文件中的值怎么辦 ## vue提供了一個props的入口，也是父子組件之間唯一的傳值方式，父組件通過v-bind自定義屬性傳入值，子組件通過props接受對應的參數 # 父組件 ``` <template> <div> <Mashibing :msb-value="a"></Mashibing> </div> </template> ``` ## 公共v-bind自定義屬性傳值，注意由于vue的屬性對大小寫不敏感，所以如果需要寫駝峰命名，需要使用-隔開 ## 比如msb-value代表的就是msbValue ``` data(){ return { a: 100 } } ``` # 子組件 ``` <script> export default { // 羅列父組件傳進的屬性值 props:['msbValue'], data() { return { a: 100 } }, methods:{ add() { this.a ++ } } } </script> ``` ``` <template> <div> <h1>馬士兵教育，我接收到的父組件的值是：{{msbValue}}</h1> </div> </template> ```  子組件通過props羅列父組件的傳值，接收的參數可以有多個，props可是數組，也可以是對象 ## 父組件 ``` <div> <Mashibing :msb-value="a" :value-b="b" :value-c="c"></Mashibing> </div> ``` ## 子組件接受，數組方式 ``` <template> <div> <h1>馬士兵教育，我接收到的父組件的值是：{{msbValue}} {{valueB}} {{valueC}}</h1> </div> </template> <script> export default { // 羅列父組件傳進的屬性值 props:['msbValue','valueB','valueC'], data() { return { } }, methods:{ add() { this.a ++ } } } </script> ```  ## 可以使用對象去接收參數 ``` props:{ msbValue: Number, valueB: Number, valueC: Number } ``` 如果props是一個對象，那么這個對象的key是自定義傳入參數屬性，value是希望傳入的參數類型 比如我們限制的是數字類型 但是我們傳入的是一個字符串，此時，控制臺后報錯，提示你希望傳入number類型  如果props是對象的話，參數可以配置 比如配置參數必填項 ``` props:{ msbValue: { type: Number, required: true }, valueB: Number, valueC: Number }, ``` 如果props的值也是一個對象，type代表的是類型，required是一個布爾值，如果為ture代表的是設置必填項，如果不填，則會拋出錯誤  ## 比如default代表的是默認的不傳入的值的參數 ``` msbValue: { type: Number, default: 500 } ```  如果props的default值是Object或者Array，需要使用函數return ``` msbValue: { type: Object, default: ()=>{ return {a:100} } } ```  ## validator是數據的校驗 ``` msbValue: { type: Number, // 數據的校驗 validator: function(value) { return value > 101 } } ```  # 自己寫的父子傳值代碼： ## 父 app.vue ~~~ <template> <MashiBing :msb-value="a" :value-b="b" :value-c="c"></MashiBing> </template> <script> import MashiBing from "@/components/MashiBing"; export default { components: { MashiBing }, data(){ return{ a: 100, b: 200, c: 300 } } } </script> <style> </style> ~~~ ## 子 MshiBing.vue ~~~ <template> <div> <h1>馬士兵教育{{msbValue}} {{valueB}} {{valueC}}</h1> </div> </template> <script> export default{ props:['msbValue','valueB','valueC'], data(){ return{ } } } </script> <style> </style> ~~~