當(dāng)我們使用JavaScript來操作HTML元素時，我們通常會使用DOM API來獲取元素，如 document.getElementById() 或者 element.querySelector()。但當(dāng)我們使用Vue時，獲取DOM元素的方式就稍有不同了。下面我們將探討一種方法，即如何在Vue中獲取同級元素。
在上面的代碼中，我們在Vue的根元素中，添加了兩個<div>元素，并分別賦予了一個引用名(ref)：box1和box2。這樣，我們就可以通過Vue實(shí)例上的$refs對象，訪問這兩個元素了。
new Vue({
el: '#app',
mounted () {
const box1 = this.$refs.box1
const box2 = this.$refs.box2
console.log(box1, box2)
}
})在上面的代碼中，我們通過mounted鉤子函數(shù)來獲取box1和box2元素，分別存儲到 box1 和 box2 變量中，并將它們打印到控制臺上。運(yùn)行代碼，我們會在控制臺上看到這兩個元素的具體信息。
需要注意的是，$refs對象在組件渲染完成后才能被訪問。因?yàn)樵诮M件初始化期間，元素并沒有創(chuàng)建并附加到DOM中。
另外，$refs中存儲的值是一個1維的對象，其鍵名是我們定義的引用名，而鍵值則是該元素的實(shí)例。這意味著我們可以像操作普通的DOM元素一樣，對它進(jìn)行各種操作。
例如，我們可以通過 $refs 來修改元素的樣式：
new Vue({
el: '#app',
methods: {
setStyle () {
const box = this.$refs.box
box.style.backgroundColor = 'pink'
}
}
})在代碼中，我們定義了一個 setStyle() 方法，用來修改 box 元素的背景顏色為粉色。接著，在模板中添加一個按鈕，并綁定 setStyle() 方法，當(dāng)用戶點(diǎn)擊按鈕時，會觸發(fā)該方法。
以上就是Vue中獲取同級元素的一些基本方法。雖然 $refs 提供了一種相對容易的方法來訪問DOM元素，但在實(shí)際開發(fā)中應(yīng)謹(jǐn)慎使用，尤其是當(dāng)我們在大型應(yīng)用中使用過多的引用時，可能會導(dǎo)致代碼變得難以維護(hù)。