Vue.js props修改父组件的值

如题：有两种方式，第一种是使用data模板，创建一个变量副本，维护这个副本变量。

示例代码：

<p>
		有两种方式一种是在data模板中声明一个变量副本，然后更改变量副本
		如下：组件中声明了数据count，它在数组初始化时会获取父组件initCount,所以只需要维护count
	</p>
	<div id="app">
		<my-component :init-count="1"></my-component>			
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['initCount'],
			template:'<div>{{count}}</div>',
			data:function(){
				return {
					count:this.initCount
				}
			}
		});
		var app = new Vue({
			el:"#app"
		});

	</script>

第二种，是使用计算属性。

<div id="app">
		<my-component :width="100"></my-component>			
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['width'],
			template:'<div :style="style">组件内容</div>',
			computed:{
				style:function(){
					width:this.width+'px'
				}
			}
		});
		var app = new Vue({
			el:"#app"
		});

	</script>

当组件需要给别人使用的时候，推荐进行数据验证。以下是几个实例

<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		Vue.component('my-component',{
			props:{
					//必须是数字
					propA:number,
					//必须是字符串或者数字类型
					propB:[String,Number],
					//布尔值,如果没有定义，默认值就是true
					propC:{
						type:Number,
						default:true
					},
					//数字，而且是必传
					propD:{
						type:Number,
						required:true
					},
					//如果是数组或者对象，默认值必须是一个函数来返回
					propE:{
						type:Array,
						default:function(){
							return [];
						}
					},
					//自定义一个验证函数
					propE:{
						validator:function(){
							return value>10;
						}
					}
				}
			}
		});

	</script>