# 父子组件传值 ## 父组件传值给子组件 ## 我们使用组件一定是依托在某一个父组件的身上，比如我们上面写的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> ~~~