Vue成神之路（四）：Vue父子组件之间的传值

1.父组件中引用子组件

2.子组件props中定义传递变量名称

3.子组件向父组件传参数

4.父组件向子组件传参的props的类型和校验

1.数组形式
props: [data1, data2]
数组形式相当于直接接收消息，不做任何校验，一般来说，不太建议使用数组形式。
2.简单对象形式
props: { data1: String, data2: Array}
简单对象形式对父组件传递的值进行了类型校验，如果传过来的值类型不一致，控制台会报错。
3.复杂对象形式
props: {
data1: {
type: String, //设定类型
required: true, //是否必须
default: ‘default value’, //默认值
validator (value) { return (value.length < 5) } }, //校验规则
data2: {
type: Array,
required: true,
default: () => [’’, ‘’, ‘’]
}}
复杂对象形式的情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，

type: 设定参数类型，当传入参数类型与type不相符时，控制台会报错

required：设定参数是否是必传，当设为true时，不传该参数会报错

default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，否则Vue会在控制台抛出警告。

validator：校验器，是一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示没通过校验。

5.vue对象中data中定义的属性和props的属性有何不同

1.data 就是返回一个组件自身的数据对象本身是（可读可写）
props 是组件用来接收父组件数据对象的（用于组建通信）（只读）
2.解决vue中props值无法赋值子组件给data
data (){
return {
tableData7:this.itemdata,
}
},
props:{
itemdata:{
type:Array
}
},
watch:{//非常重要，不然为空
itemdata(newVal,oldVal){
this.tableData7 = newVal;
}
},