vue怎么使用refs獲取嵌套組件中的值

本文小編為大家詳細(xì)介紹“vue怎么使用refs獲取嵌套組件中的值”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue怎么使用refs獲取嵌套組件中的值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

使用refs獲取嵌套組件的值

功能簡(jiǎn)介：

1、父組件包含zujian1，而zujian1又包含zujian2

2、zujian2綁定一個(gè)輸入?yún)?shù)

<input  ref="query" v-model="query" @keypress="doSearch"/>

3、父組件獲得輸入框中的值，通過this.$refs.組件名來獲取dom元素，多層嵌套，要調(diào)多次

 // 記錄輸入框的值 this.inputValue=this.$refs.zujian1.$refs.zujian2.query

vue使用ref的好處

當(dāng)我們需要在 JavaScript 中直接訪問子組件。

為此可以使用 ref 為子組件指定一個(gè)引用 ID

<div id="parent">
  <p ref="profile" id="profile"></p>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件實(shí)例
var child = parent.$refs.profile
console.log(child )// <p ref="profile" id="profile"></p>

這與document.getElementById(“profile”)獲取dom節(jié)點(diǎn)的作用是一樣的，但使用ref會(huì)減少獲取dom節(jié)點(diǎn)的消耗

當(dāng) ref 和 v-for 一起使用時(shí)，獲取到的引用會(huì)是一個(gè)數(shù)組，包含和循環(huán)數(shù)據(jù)源對(duì)應(yīng)的子組件。

讀到這里，這篇“vue怎么使用refs獲取嵌套組件中的值”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。