官網上的說明

1.了解Vue中的$refs在Vue中是怎麽訪問到DOM元素的

<div id="app">
  <h1>{{ message }}</h1>
  <button ref="myButton" @click="clickedButton">點擊偶</button>
</div>
let app = new Vue({
    el: ‘#app‘,
    data () {
        return {
            message: ‘Hi!大漠‘
        }
    },
    methods: {
        clickedButton: function () {
            console.log(this.$refs)
            this.$refs.myButton.innerText = this.message
        }
    }
})

點擊按鈕之後，按鈕的文本將更改變“Hi,!大漠”：

當然，我們也可以通過使用查詢選擇器來訪問DOM元素來實現這樣的效果，但是使用ref屬性更簡潔，而且這也是Vue中的方法。它也將更安全，因為你不會依賴於class和id。因此，幾乎不會因為更改了HTML的標簽或者CSS樣式受到影響。

像Vue這樣的JavaScript框架的主要目的之一就是讓開發人員不必去處理DOM。所以你應該避免去做這樣的事情，除非你真的需要去做。還應該要註意一個潛在的問題。

正如你所看到的，我們在更新數據屬性時覆蓋了我們對DOM所做的更改。這樣做的原因是，當訪問DOM元素並直接操作它們時，實際上跳過了前面文章中討論到的虛擬DOM。因此，Vue仍然控制著h1

另外來看看v-for指令中使用refs屬性的效果。比如下面這個示例，給一個無序列表ul，通過v-for指令輸出1至10的數字。

<ul>
    <li v-for="n in 10" ref="numbers">{{ n }}</li>
</ul>

當你點擊按鈕時，$refs

正如上圖所看到的一樣，把numbers屬性添加到了對象中，但需要註意該值的類型。與之前看到的DOM元素不同，它實際上是一個數組，一個DOM元素的數組。當使用ref屬性和v-for指令時，Vue會叠代所有DOM元素，並將它們放置在數組中。在這種情況下，這就輸出了10個li的DOM元素的數組，因為我們叠代了10次。每個元素都可以像我們之前看到的那樣使用。

總結

如圖，ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例：

在上面的例子中，input的引用信息為input1 ，$refs 是所有註冊過的ref的一個集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById(‘input1‘))//<input type="text" id="input1">

這兩種方法獲得的都是Dom節點，而$refs相對document.getElementById的方法，會減少獲取dom節點的消耗。

2.父組件通過ref獲取自組件進行操作：

獲取子組件：

Vue學習筆記：Ref的使用