Vue父子组件传值（单向数据流）

<div id="app">
        <counter :count="2" @change="handleChange"></counter>
        <counter :count="6" @change="handleChange"></counter>
        <div>{{total}}</div>
 </div>

    var counter = {
            props: ['count'],
            //子组件不能对父组件传过来的值进行修改
            data: function() {
                return {
                    //所以这里使用一个参数来存放父组件传过来的值
                    number: this.count
                }
            },
            template: "<div @click='handleClick'>{{number}}</div>",
            methods: {
                handleClick: function(){
                    this.number = this.number + 2,
                    this.$emit('change',2)//$emit(),可以接收一个参数
                }
            }
        }

        var vm = new Vue({
            el: "#app",
            data: {
                total: 8
            },
            components: {
                counter: counter
            },
            methods: {
                handleChange: function(step) {
                    this.total += step
                }
            }
        })