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

组件的参数校验：父组件通过属性传递给子组件数据，子组件有权对这些数据进行约束，这就是参数校验。

如下，简单的参数校验。

	<div id="root">
		<child content="hello world"></child>
		<!-- 下面会报错，因为content传递的是一个数组，参数校验不通过 -->
		<child :content="123"></child>
	</div>
	<script>
		// 全局子组件
		Vue.component("child",{
			props: {
				// 是数字的话，将String 变为Number即可
				content: String,
				// 数字和字符串都可以
				vvv: [String, Number]
			},
			template: "<div>{{content}}</div>"
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>

更加复杂的参数校验条件，如下。

	<div id="root">
		<child content="hello world" :content2="'1wetwg2'"></child>
		<!-- 下面会报错，因为content传递的是一个数组，参数校验不通过 -->
		<child :content1="123" :content2="'1289gd'"></child>
	</div>
	<script>
		// 全局子组件
		Vue.component("child",{
			props: {
				// 是数字的话，将String 变为Number即可
				content: String,
				// 数字和字符串都可以
				content1: [String, Number],
				// required为 true 则必须有该参数
				content2: {
					type: String,
					required: true,
					default: "default value",
					// 要求参数长度必须大于5
					validator: function(value){
						return (value.length > 5)
					}
				}
			},
			template: "<div>{{content2}}</div>"
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>

props 特性与 非props 特性

props 特性： 父组件使用了该特性往子组件传递参数，而子组件在props 中声明了该属性。

    该属性不会显示在dom之中。子组件使用 this.参数名 或者{{参数名}} ，可以使用该属性

非 props 特性： 父组件使用了该特性往子组件传递参数，而子组件并没有在props 中声明了该属性。

    该属性会显示在dom之中。子组件中无法使用。