vue父子组件之间props的数据通信
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue父子组件之间props的数据通信相关的知识，希望对你有一定的参考价值。
参考技术A vue在实际项目开发中,数据需要从上层传递到下层:1、比如在一个页面中,我们从服务器请求到了很多的数据。
2、其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
3、这个时候,并不会让子组件再次发送一个网络请求 ,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
父组件是通过props向子组件传递数据的
子组件是通过事件$emit向父组件发送信息的
props信息传递过程
①在组件上v-blind一个自定义属性，并将父组件的数据变量名字赋值给这个属性,(可以定义多个属性绑定数据)
<com v-blind:childrenname="name" v-blind:childrenage="age"> </com>
②在组件的上增加props属性，属性的名字就是组件上自定义的属性名
props：[‘childrenname’,'childrenage']
props支持自定义验证和自定义验证类型
①自定义验证函数，需要使用validator属性
props：
children: validator:function(value) rerurn
如果不符合验证要求会报错 ：Invalid prop: custom validator check failed for prop "cmessage".
found in
②自定义验证类型
以上是关于vue父子组件之间props的数据通信的主要内容，如果未能解决你的问题，请参考以下文章