官網上的說明
1.了解Vue中的$refs在Vue中是怎么訪問到DOM元素的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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元素，甚至當Vue對數據中的做出更新時，它會更新虛擬DOM，然后更新DOM本身。因此，你應該小心使用對DOM的直接更改，就算是你不小心做了相應的修改，你所做的任何更改都將可能會被覆蓋。雖然在使用refs時應該小心更改DOM，但是做只讀操作相對來說比較安全，比如從DOM中讀取值。
另外來看看v-for指令中使用refs屬性的效果。比如下面這個示例，給一個無序列表ul，通過v-for指令輸出1至10的數字。
|
1
2
3
|
<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獲取自組件進行操作：
獲取子組件：
