這篇文章將為大家詳細(xì)講解有關(guān)如何在Vue中使用ref和$refs方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司2013年成立，先為綏寧等服務(wù)建站，綏寧等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為綏寧企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在JavaScript中需要通過(guò)document.querySelector("#demo")來(lái)獲取dom節(jié)點(diǎn)，然后再獲取這個(gè)節(jié)點(diǎn)的值。在Vue中，我們不用獲取dom節(jié)點(diǎn)，元素綁定ref之后，直接通過(guò)this.$refs即可調(diào)用，這樣可以減少獲取dom節(jié)點(diǎn)的消耗。

ref介紹

ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向該子組件實(shí)例

通俗的講，ref特性就是為元素或子組件賦予一個(gè)ID引用,通過(guò)this.$refs.refName來(lái)訪問(wèn)元素或子組件的實(shí)例

Hello

this.$refs.p
this.$refs.children

this.$refs介紹

this.$refs是一個(gè)對(duì)象，持有當(dāng)前組件中注冊(cè)過(guò) ref特性的所有 DOM 元素和子組件實(shí)例

注意： $refs只有在組件渲染完成后才填充，在初始渲染的時(shí)候不能訪問(wèn)它們，并且它是非響應(yīng)式的，因此不能用它在模板中做數(shù)據(jù)綁定

注意：

當(dāng)ref和v-for一起使用時(shí)，獲取到的引用將會(huì)是一個(gè)數(shù)組，包含循環(huán)數(shù)組源

實(shí)例（通過(guò)ref特性調(diào)用子組件的方法）

【1】子組件code：

【2】父組件code:

關(guān)于如何在Vue中使用ref和$refs方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：如何在Vue中使用ref和$refs方法-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/hihoh.html