组件的参数校验

当父组件向子组件进行传值时，子组件可以对传入的值有一定的约束，这个过程就可以叫做参数校验

当父组件向子组件传递一个参数的时候，需要在子组件的props属性中进行声明，对于传入参数的约束部分也写在这里

由于传入参数有了约束，所以声明部分不可用数组形式，而应该写成对象

props:{
	content:String
}

所约束内容也可用数组形式来写

props:{
	content:[String,Number]
}

多个约束条件也可写为对象形式

props:{
	content:{
	type:String,
	required:true/false,
	default:'default value'//默认值 
	validator:function(value){
	    return(value.length>5 )
	}//校验器，对传入的值进行校验，value为传入的值
}

• type：约束参数的类型
• required：约束参数是否为必传项目
• default：默认值。若参数为非必传，则在没有参数传入时使用default内定义的参数值
• validator：校验器，对传入的值进行校验，返回校验后的值，value为他接收的一个参数，是传入的值

属性props

Vue组件通过props属性来声明一个自己的属性，然后父组件就可以向里面传递数据

• 由于HTML特性是不区分大小写的，所以传递属性值时属性名不能使用驼峰形式而要使用kebab-case（短横线-隔开）形式
• 动态的绑定（即父组件变化，子组件改变）需要使用到v-bind
• 静态的绑定基本类型的值时，要想使传入的值类型不变，则需要用v-bind，这样引号内的内容会作为js表达式处理
• 传值后的参数可以在子组件中进行调用

非props特性

父组件向子组件进行传值，但子组件并未在props中进行说明，也就是并不对传值进行接收，这时就为非props特性

• 此时在子组件内并不可调用父组件的传值
• 当声明了一个非props特性的属性时，这个属性会展示在最外层的DOM标签的HTML属性内

绑定原生事件

例

<div id="root">
	<child @click="handleClick"></child>
</div>

<script type="text/javascript">
	Vue.component('child',{
		template:'<div @click="handleChlidClick">Child</div>',
		methods:{
			handleChlidClick:function(){
				alert('child click')
			}
		}
	})
	var vm = new Vue({
		el:'#root',
		methods:{
			handleClick:function(){
				alert('click')
			}
		}
	})
</script>

当我们在HTML中设置的@click函数，想要在点击该标签时触发函数，但并不会达到想要的效果，这是由于我们在使用组件时绑定的监听函数是一个自定义函数，并不是我们理解的原生函数

所以为了达到点击函数的目的，我们需要在定义模板时直接在模板当中设置监听函数，并在组件中对函数进行定义

另一简便方式则是在监听函数后添加native,再直接在Vue中声明函数即可

<div id="root">
	<child @click.native="handleClick"></child>
</div>