父子组件传值11

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件传值</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 
		 父组件通过属性的形式向子组件传值，子组件可以使用该数据但不可以修改该数据
		 子组件通过事件触发的形式向父组件传递数据
		 -->
		<div id="app">
			<counter :count="0" @inc="handleIncrease"></counter>
			<counter :count="0" @inc="handleIncrease"></counter>
			<div>{{total}}</div>
		</div>
		<script >
			/* 定义一个局部组件 */
			var counter={
				props:['count'],
				data:function(){
					return {
						number:this.count
					}
				},
				template:'<div @click="handleClick">{{number}}</div>',
				methods:{
					handleClick:function(){
						this.number++
						this.$emit('inc',1)/* 触发一个名为inc的事件，参数是每次增加1 */
					}
				}
			}
			
			var vm=new Vue({
				el:'#app',
				components:{
					counter:counter/* 注册局部组件 */
				},
				data:{
					total:0
				},
				methods:{
					handleIncrease:function(step){
						this.total+=step
					}
				}
			})
		</script>
	</body>
</html>