vue中使用ref获取dom对象

在标签上绑定一个ref属性，该属性可以获得该标签的dom对象

    <div id="app">
        <div ref="hi" @click="say" class="demo" id="only">Hello World</div>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            methods: {
                say() {
                    console.log(this.$refs)
                }
            }
        })
    </script>

结果：this.refs对象上有个hi对象，hi对象就是该标签的dom对象。

在组件中使用ref属性：

    <div id="app">
        组件一的值：<counter ref="one" @change="sum"></counter>
        组件二的值：<counter ref="two" @change="sum"></counter>
        一和二的总和：<span>{{sumNumber}}</span>
    </div>
    <script>
        Vue.component('counter', {
            template: `<div @click="handle">{{number}}</div>`,
            data: function(){
                return {
                    number: 0
                }
            },
            methods: {
                handle(){
                    this.number ++
                    this.$emit('change')
                }              
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                sumNumber: 0
            },
            methods: {
                sum() {
                    this.sumNumber = this.$refs.one.number + this.$refs.two.number
                }
            }
        })
    </script>

结果：