vue父子组件之间props的数据通信

vue在实际项目开发中,数据需要从上层传递到下层:

1、比如在一个页面中,我们从服务器请求到了很多的数据。

2、其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。

3、这个时候,并不会让子组件再次发送一个网络请求 ,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

父组件是通过props向子组件传递数据的

子组件是通过事件$emit向父组件发送信息的

父子组件传值

props信息传递过程

①在组件上v-blind一个自定义属性，并将父组件的数据变量名字赋值给这个属性,(可以定义多个属性绑定数据)

<com v-blind:childrenname="name" v-blind:childrenage="age"> </com>

②在组件的上增加props属性，属性的名字就是组件上自定义的属性名

props：[‘childrenname’,'childrenage']

注意：

① props后面可以是数组或者对象，数组对数据不可以定义，对象可以定义数据的类型type，数据的默认值default，数据的是否必须项require

props：{childrenname：{  type:string  ,   default:'linlin'  ,   require:true },childrenage:{ type:num,default:3} }

②props使用对象时，定义了默认值，组件上没有绑定属性时，就会显示默认值

③数据类型type定义为array和对象时，default的最好使一个函数，否则高版本会报错，default(){ return [ ]  }  

④type数据类型 支持 String 、 Number、 Boolean、 Array、 0bject 、 Date 、Function 、 Symbol

props支持自定义验证和自定义验证类型

①自定义验证函数，需要使用validator属性

props：{

children:{ validator:function(value){ rerurn }}

}

如果不符合验证要求会报错 ：Invalid prop: custom validator check failed for prop "cmessage".

found in

②自定义验证类型