下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+1时，又把加的步长传给了父组件，在父组件中显示的总和。 !DOCTYPE html html lang = en head meta charset = "utf-
下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+1时，又把加的步长传给了父组件，在父组件中显示的总和。
<!DOCTYPE html><html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<counter :count="0" @change='handleIncrease'></counter>
<counter :count="1" @change='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.count++
//单项数据流概念：子组件不要随意修改父组件传递的参数，只用就可以了，如果是引用类型，会影响外部组件
//如果一定要修改，修改副本
this.number++;
//通过事件触发的方式子组件向父组件传值
this.$emit('change',1); //发生改变，步长为1
}
}
}
var vm = new Vue({
el:"#root",
data:{
total:1
},
methods:{
handleIncrease: function(step){
this.total+=step;
}
},
components:{
counter:counter
}
})
</script>
</body>
</html>
1.父组件是通过属性的方式向子组件传值
在子组件中定义props，count就是要接收值的属性。
props:['count'],在父组件中给它赋值：两个标签，一个赋值为0，一个赋值为1，count前面的:怎么用，这里是数字，加不加:都可以，如果是字符串不能加:,加上:意味着找父组件的这个变量。:count="name"，为找父组件定义的name变量的值，赋值给count，count="name"，把name字符串赋值给count。
<counter :count="0" @change='handleIncrease'></counter><counter :count="1" @change='handleIncrease'></counter>
子组件获取值后，我们把它赋值给子组件中定义的一个变量number。然后点击时number+1，把步长返回给父组件
2.子组件通过事件触发的方式向父组件传值
this.$emit('change',1); //发生改变，步长为1自定义一个change事件，在父组件中用@change监听，后面跟的时参数可以多个，也可以没有参数。
<counter :count="0" @change='handleIncrease'></counter><counter :count="1" @change='handleIncrease'></counter>
父组件监听到change事件后，触发handleIncrease方法，方法的参数就给$emit中传过来的参数