之前说要学习一下VUE的组件通讯机制，但是因为公司的任务比较多且急，连续两个大的项目模块，合规的和反洗钱真的自己全身心的投入到其中了，连续加了几周的班，今天休息了一下，刚好把vue部分父子组件的通讯方式梳理了一下，就写点总结吧。
基本用法
Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。
Vue.component('child', {
...
// 接收message
props: ['thisData']
...
})
由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，thisData需要转化为this_data。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop.
Prop中的静态和动态值
在正常情况下，一般在父组件中通过v-bind定义一个动态值，子组件通过Prop接收该值，所以，很多人认为，Prop只能接收动态值。但是，其实Prop可以接受静态属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<!--静态传递数据-->
<my-component message="hi~" name="大超" age="25"></my-component>
</div>
</body>
<script>
Vue.component('my-component',{
//子组件使用父组件的数据 message name age
props:['message','name','age'],
//用data选项对数据进行处理
data:function(){
return{
message1: this.message +'AAA'
}
},
//用计算属性选项对数据进行处理
computed:{
message2:function(){
return this.message + 'BBB'
}
},
template:'<div>' +
'<span>{{message1}}</span><br>'+ //hi~AAA
'<span>{{message2}}</span><br>'+ //hi~BBB
'<span>{{message}}，{{name}}，{{age}}了</span><br>'+ ////hi~，大超，25了
'</div>'
})
new Vue({
el:'#app'
})
</script>
</html>
动态传递数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<input v-model="parentMsg"><br>
<my-component :message="parentMsg"></my-component>
</div>
</body>
<script>
Vue.component('my-component',{
props:['message'],
data:function(){
return{count:this.message+'模块'}
},
computed:{
normalizedSize: function () {
return this.message.trim().toLowerCase()
}
},
template:'<div>' +
'<span>{{message}}---{{normalizedSize}}</span><br>'+
'<span>{{count}}</span>'+
'</div>'
})
new Vue({
el:'#app',
data:{
parentMsg:'CCC'
}
})
</script>
</html>
//输出：
//CCC---ccc
//CCC模块
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父组件的 Prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父组件以及同级子组件的状态，从而导致你的应用的数据流向难以理解。
另外，每次父组件发生更新时，子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop，如果你这样做了，Vue会在控制台抛出一个警告。
一般来说，如果子组件需要操作Prop中的值，需要将Prop中的值赋值给本地定义的属性：
props: ['message'],
data () {
return {
mes: this.message
}
}
...
非Prop特性
非Props特性是指在组件上定义了属性，而又没有使用Prop接受属性。此时，子组件内不可使用该属性值，该属性会直接添加到子组件的根节点上。
比如，在一个只含有一个div的子组件上，如果我向子组件传了一个content属性，但是子组件不使用Prop接收content属性，则渲染结果为：
<div id="root">
<div content="hello"></div>
</div>
Prop校验
Prop验证，我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。在前台的控制器中可以看到警告信息。
子组件用Props接收父组件传来的消息有多种形式：
1.数组形式：数组形式相当于直接接收消息，不做任何校验，一般来说，不太建议使用数组形式
props: [data1, data2]
2.简单对象形式：如果不符合会跑出类型报错
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<example :prop-d="message"></example>
</div>
</body>
<script>
Vue.component('example', {
props: {
propA: {
type: Number,
default: 100,
}
},
template:'<span>{{propA}}</span>'
})
new Vue({
el:'#app',
data:{
message:'propA验证只能传入数字类型'
}
})
</script>
</html>
3.复杂对象形式
props: {
data1: {
type: String,
required: true,
default: 'default value',
validator (value) {
return (value.length < 5)
}
},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}
复杂对象形式的情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，type、required、default、validator。
type：设定参数类型，当传入参数类型与type不相符时，控制台会报错
required：设定参数是否是必传，当设为true时，不传该参数会报错
default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，否则Vue会在控制台抛出警告。如图所示，就通过工厂模式生成了一个长度为3的空数组。
validator：校验器，是一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示没通过校验。
