在標籤上繫結一個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>
 

結果：