props特性 & 组件参数检验

一、props特性

• props中定义的数据跟data中数据一样，会直接添加在组件实例化对象上，并设置了特性，所以可以直接this.content进行访问,可直接在插值语法{{}}中使用，可进行简单逻辑处理，但是不能在methods中直接对值进行更改；
• 通过属性传值，并在props中定义的该属性不会在标签中显示；非props的属性会在标签中显示

	<div id="app">
		<count :content="1" counter="hello"></count>
	</div>

	Vue.component("count", {
			props: ["content"],
			......

下面是一个关于单向数据流的小例子：

	<div id="app">
		<count :content="1"></count>
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		//注册count组件
		Vue.component("count", {
			props: ["content"],
			template: "<div @click='addNum'>{{content}}--{{content+1}}</div>",
			data() {
				return {
				}
			},
			methods: {
				addNum: function() {
					this.content++;
				}
			}
		})
		var app = new Vue({
			el: "#app"	
		})

代码描述：父组件向子组件count传递content属性，子组件用props接收，可以直接在子组件模板插值语法{{}}进行使用，可以插值中进行简单js逻辑运算，但是不能在事件中对content进行修改，会报错。
原因:单向数据流

解决：将props里面的content转化为子组件实例里面data的数据，再进行操作

		Vue.component("count", {
			props: ["content"],
			template: "<div @click='addNum'>{{content}}--{{content+1}}--{{numValue}}</div>",
			data() {
				return {
					numValue: this.content
				}
			},
			methods: {
				addNum: function() {
					this.numValue++;//可对自身实例的data值进行操作，不能反过来修改父组件传递的数值
				}
			}
		})

二、组件参数校验

	<div id="app">
		<count :content="1"></count>
	</div>
		//注册count组件
	Vue.component("count", {
		// props: ["content"],  对传入的属性进行定义
		//通过传入的对象，可以对参数进行校验
		props: {
			content: String //Number 校验content传进来的数据必须为String，不然会报错
			// content: [String, Number]  可以为数字，也可以为字符串
		}
		template: "<div></div>",

还可以进行更加严格的校验

		Vue.component("count", {
			// props: ["content"],  对传入的属性进行定义
			//通过传入的对象，可以对参数进行校验
			props: {
				content: {
					type: String,
					required: true,//必须添加该属性(可选)
					default: "default value",//如果该属性值不存在时，默认为该字符串
					//校验器:该字符串长度必须大于5
					validator: function(value) {
						return (value.length > 5)
					}
				}
			},