本文主要是介绍Vue组件通讯之一：props，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
组件间通信是组件开发时非常重要的一个环节，Vue在组件键通讯提供了直接访问组件实例的方法，同时也提供了自定义事件机制，通过广播、委派、监听等形式跨组件的函数调用。
在组件的实例中，Vue提供了三个属性对其父子组件以及根实例进行直接访问：
（1）$parent：父组件实例；
（2）$children：包含所有子组件实例；
（3）$root：组件所在的根实例。
这三个属性都挂载在组件的this上，虽然vue提供了直接访问这种方式，但是官方文档中说明不建议这么操作。因为这会导致父组件和子组件的紧密耦合，且自身状态难以理解，所以尽量使用props在组件中传递数据。
组件实例的作用域是孤立的，也就是说子组件的模板和模块中默认是无法直接调用父组件中的数据，所以通过组件选型props将父组件的数据传递给子组件，子组件在接受数据是需要显示声明props。这个正向传递(从父组件到子组件)数据的过程就是通过props来实现的。
在组件的应用中，使用组件选型props来声明需要从父组件接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。
【驼峰命令】
如果我们在<my-child>中属性使用驼峰命名方式,那么在props选项中命名即为props：[‘myChild’]。所以如果需要使用驼峰命名的话，我们需要在标签中使用my-param，用“-”的方式隔开，这样在props中就可以使用props:[‘myParam’]的形式进行声明。
1.动态props
我们也可以通过v-bind的方式将父组件的数据传递给子组件。
<body>
<div id="app"><input type="text" v-model="message"/><my-component v-bind:cmessage="message"></my-component>
</div>
<script>Vue.component('my-component', {props: ['cmessage'],template: "<p>{{'From parent:'+cmessage}}</p>"});var vm = new Vue({el: '#app',data: {message: '父组件默认值'}});
</script>
</body>
【注释】以上代码中的props声明一个cmessage用来接受父组件message属性的值。
2.props校验
组件可以指定props验证要求，这对开发第三方组件来说，可以让使用者更加准确地使用组件。使用验证的时候，props接收的参数为json对象，而不是上述例子中的数组，例如：props:{a:Number},即为验证参数a需要为Number类型，如果调用该组件传入的a参数为字符串则会抛出异常。
Vue提供props验证的方式有很多中，具体如下：
（1）基本类型检测：prop接收的参数为原生构造器，Stirng，Number，Boolean，Function，Object，Array。也可以接收null，意味任意类型均可。
（2）多种类型：prop:[Number,String];允许参数为多种类型之一；
（3）参数必须:prop:[type:Number,required:true];表示参数必须有值且为Number类型。
（4）参数默认值：prop:[type:Number,default:10] 表示参数具有默认值10；需要注意的是如默认值设置为数组或对象，需要向组件中data属性那样，通过函数返回值得形式复制，例如：
props:{type:Object,default:function () {return { val: 10}}
}
（5）自定义校验 prop:{validator:function(value){return value>0;}} 表示验证值必须大于0。
这篇关于Vue组件通讯之一：props的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
