vue的ref引用 使用方法

<div id="app">
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
</div>

Vue.component("counter",{
            template: "<div @click='handleClick'>{{number}}</div>",
            //子组件定义data时 ，data不能为对象，必须是函数
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function(){
                    this.number++,
                    this.$emit('change')
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                    this.total = this.$refs.one.number + this.$refs.two.number
                }
            }
        })