Vuejs之路之--父子组件（未完待续）

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息，在这其中所谓的父组件就是注册组件时你所定义的自定义标签，子组件就是template所对应的标签（标准化html标签）。父组件通过props向子组件传递数据，你可以理解props为properties（属性）的缩写弄清楚了什么是父组件和子组件，剩下的就好办了

camelCase vs. kebab-case

当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式),是在父模板中对应的属性名。其实就是props的不同的命名方法，举个例子就知道了：

html部分

<child :my-status="dataArr"></child>

js部分

Vue.component("child",{
			props:["myStatus"],
			template:"<i>{{myStatus}}</i>",
		})
		
		var vm = new Vue({
			el:"#container",
			data:{
				dataArr:"hello,又见到你了！",
				paper:"好久不见呢！"
			}
		})

单向数据流

这里主要讲的是，只能是是父组件中的属性变化或者更新引起子组件内容的更新，但是却不能反过来，否则的话将不知道谁影响谁的了；

这里根据官网上的例子，结合prop属性来进一步了解关于data的设置，其中的一斜细节：

HTML部分：

<div id="container">
		<boxer :hello-world="datas"></boxer>
		<br>
		<input type="text" name="text" v-model = "datas">
	</div>

JS部分：

Vue.component("boxer",{
			props:["helloWorld"],
			template:"<i :hello='helloWorld' @click='func()'>{{helloWorld}}</i>",
			data:function(){
				return {
					counter:this.helloWorld,
					//this在这里代表的是组件实例本身，
					//而对于helloWorld，你可以认为其已经以helloWorld属性的形式存在域这个对象里面了（只不过是隐式的），就像counter一样，只不过其值来源于父组件
					//而counter：this.helloWorld，就是将这个属性赋值给counter属性，就像保存变量一样......
					func:function(){
						console.log(this.counter)//返回的是，hello,那么什么是单项数据流呢？？更加证明了上面的假设，因为只有组件实例本身能访问counter，才能执行func
					}
				}
			}
		})
		var vm = new Vue({
			el:"#container",
			data:{
				datas:"hello,那么什么是单项数据流呢？？"
			},
			methods:{
				alert3:function(){
					alert(3)
				}
			}
		})

在注册组件的时候，里面的data属性是给子组件用的，所有的在Vue实例中出出现的属性（如methods，filter，computed等等）也是一样

Prop验证

我们还可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。要指定验证规格，需要用对象的形式：

举个栗子，例如：

Vue.component("eleparam",{
			// 对象
			props:{
				// 属性propA的值应该是一个数字才行
				propA:Number,
				// 属性propB的值可以是字符串和数字
				porpB:[String,Number],
				// 在父组件中必须出现propC这个属性
				propC:{
					type: String,
      				required: true
				},
				// 属性propD的类型是Number，默认值是1000（也就意味着不用在负组件中绑定propD这个属性，就可以在子组件中使用）
				propD:{
					type:Number,
					default:1000
				},
				//数组/对象的默认值应当由一个工厂函数返回，其他部分同上
				propE:{
					type:Array/Object,
					default:function(){
						return ["hudadshua","dasdasdasdsa"]/{meaage:"返回的是一个对象"}
					}
				},
				// 正在探索中......
				propF:{
					validator:function(val){
						return val>10
					}
				}
			},
			template:"<div>{{propF}}</div>"
		})

以上所有的规则都是应用在父组件上的，而不是子组件上（其实也好理解，因为子组件上上的数据可以一部分来自于父组件，当在父组件上验证通过的时候，就可以应用在子组件上了，子组件上也没必要验证）

注意:type可以取String,Number,Boolean,Function,Object,Array,Symbol（参考例子就会明白），注意 props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

这个是官网中的原话，意思就是说，上述的校验过程是在组件实例创建之前（此时并没有完成子组件的渲染，只是父组件完成了渲染）完成的，然而data，computed，methods等等都都是应用在子组件中的......所以这些属性还没发使用。

非prop属性；

一般而言，父组件的属性传递给子组件的时候，是通过props来传递的，但是也有一些父组件的属性不需要通过props来传递，就可以“继承”在子组件上，比如说class，style属性，如果子组件上已经有了这些属性，那么就会发生属性的"合并"。

例如：

JS部分

Vue.component("shuju",{
		props:["property"],
		template:"<p style = 'background:yellow' class = 'ppp'>{{property}}</p>"
	})

Html部分

<shuju :property="datas" style= "color: red" class = "font_italic"></shuju>

当你审查元素的时候就会发现，根元素（p元素）的class值有两个分别是 font_italic和ppp，style属性也发生了合并，但是我们并没有利用props来从父组件中得到这些......