八、Vue 组件参数校验与非props特性

一、props特性

props:[‘content’],
如果只是简单的一种限制可以这么写
注意：如果是数字，content前需要加：
```
	props:{
		content:Number
	},
```
几种一起数字或字符串
```
props:{
	content:[Number,String]
},
```

多种定义，限制

props:{
		content:{
			type:String,				// 传值类型
			required:true,				// 是否必填
			default:'Default value',	// 默认值
			validator:function (value) {// 满足要求返回true 否则返回 false,检查传入的值 value
				return value.length > 5
			}
	},

二、非props特性:父组件传值，子组件不接

不写props:这种会报错

组件写死了，content就会出现在最外层的document标签中

template:'<div>Hello</div>' -->  <div content="Hel">Hello</div>（编译后）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>组件参数校验与非props特性</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		<child content='Hel'></child>
	</div>
	<script type="text/javascript">
		/* 组件参数校验:父组件往子组件进行传递一些数据时，子组件对这些数据进行的一些限制 | 约束 */
		Vue.component('child',{
			/* 一、props特性 1、props:['content'], 2、如果只是简单的一种限制可以这么写 注意：如果是数字，content前需要加 ： props:{ content:Number }, 3、几种一起 数字或字符串 props:{ content:[Number,String] }, 4、多种定义，限制 props:{ content:{ type:String, // 传值类型 required:true, // 是否必填 default:'Default value', // 默认值 validator:function (value) {// 满足要求返回true 否则返回 false return value.length > 5 } } }, 二、非props特性:父组件传值，子组件不接 1、不写props:这种会报错 2、组件写死了，content就会出现在最外层的document标签中 template:'<div>Hello</div>' --> <div content="Hel">Hello</div> */
			
			template:'<div>Hello</div>'
		})
		var vm = new Vue({
			el:'#root',
		});
	</script>
</body>
</html>