vuejs父子组件的数据传递

<div id=‘root‘>
　　<counter :count = ‘1‘></counter>
　　<counter :count = ‘2‘></counter>
</div>

<script>
var counter = {
　　props:[‘count‘],
　　　　template:‘<div>{{count}}</div>‘
　　}
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　components:{
　　　　　　counter: counter
　　　　}
})
</script>

var counter = {
　　props:[‘count‘],
　　template:‘<div @click="handleClick">{{count}}</div>‘,
　　methods:{
　　　　handleClick:function(){
　　　　　　this.count ++
　　　　}
　　}
}

var counter = {
　　props:[‘count‘],
　　data:function(){
　　　　return {
　　　　　　number:this.count
　　　　}
　　},
　　template:‘<div @click="handleClick">{{number}}</div>‘,
　　methods:{
　　　　handleClick:function(){
　　　　　　this.number ++
　　　　}
　　}
}

<div id=‘root‘>
　　<counter :count = ‘3‘ @change = ‘handleChange‘></counter>
　　<counter :count = ‘2‘ @change = ‘handleChange‘></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 += 2;
　　　　　　this.$emit(‘change‘,2);
　　　　}
　　}
}
var vm = new Vue({
　　el:‘#root‘,
　　data:{
　　　　total:5
　　},
　　components:{
　　　　counter: counter
　　},
　　methods:{
　　　　handleChange:function(step){
　　　　　　this.total += step;
　　　　}
　　}
})