vue组件通信1：父传子（props）

一，前言

1.props用于父子组件的通信。

2.props具有单向下行绑定，由父组件传递给子组件。

二，子组件props声明

1.props是Vue Option Api的一个选项，声明该组件接受父组件传递的props，可接受数组和对象。

（1）数组：props:['title','content'] 。

（2）对象：props:{ title:Number }

2.使用对象形式可以对props进行 值类型校验 和 设置默认值。

（1）类型校验：

{
	props:{
		title:String, //单类型  
		title:[Number,Boolean] //多类型
		title:{ type:String } //注意所有类型不能加引号
	}
}

（2）必填校验

{
	props:{
		title:{ required:true } 
	}
}

（3）自定义验证函数： 函数返回布尔值，为true验证通过

{
	props:{
		title:{ validator:(v)=>typeof v =='number'} 
	}
}

（4）设置默认值：注意对象或数组默认值必须从一个工厂函数获取

{
	props:{
		title:{ default:"hello world"} 
		list:{ type:Array, default:()=>[1,2,3]} //对象或数组默认值必须从一个工厂函数获取
	}
}

3.子组件不能修改props，若需要修改props的值，可以把props作为初始值赋值给组件自己的data

4.在一个组件中，props可以像data一样被使用，除了不能被修改。

三，父组件props传递

1.子组件使用驼峰命名的props,父组件传递给子组件时需要使用-分割 ： dogName -> dog-name。

2.为了方便书写，当子组件接受的props较多，可以使用一个对象全部传入，此时直接使用v-bind='objName'即可。 （类似于react的{...props}）

let post ={a,b}
<Post v-bind="post"/>
等价于
<Post v-bind:a="post.a" v-bind:b="post.b" />

四，非props的属性

1.非props的属性是指父组件传递给子组件，而子组件并未声明相应的props的属性

2.默认情况下，非props的属性会被直接加在子组件的根节点上。

3.例如在子组件上定义style，class,或者事件会被直接加在根元素上。

4.inheritAttrs是配置对象的一个属性，我们可以在子组件使用inheritAttrs:false来禁用这种默认行为

五，注意事项

1.由于在子组件不能修改props，所以不能直接把props作为v-model的值，