<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件参数校验与非props特性</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<child content="hello"></child>
		</div>
		<script>
			
			Vue.component('child',{
				/* 
				 接受一个参数为content，类型（type）为字符串类型，不是必传字段（required），默认内容为default value
				 自定义校验器validator校验参数长度大于4
				 */
				/* 
				 props特性：父组件传值，子组件用props接受并且可以用差值表达式显示在模板中
				 非props特性：父组件传值，子组件不接受不能用差值表达式显示，但属性会显示在dom标签的属性中
				 */
				props:{
					content:{
						type:String,
						required:false,
						default:'default value',
						validator:function(value){
							return (value.length>4)
						}
					}
				},
				template:"<div>{{content}}</div>"
			})
			var vm=new Vue({
				el:'#app'
				
			})
		</script>
	</body>
</html>