本文小編為大家詳細介紹“vue怎么使用refs獲取嵌套組件中的值”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue怎么使用refs獲取嵌套組件中的值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
功能簡介：
1、父組件包含zujian1，而zujian1又包含zujian2
2、zujian2綁定一個輸入參數
<input ref="query" v-model="query" @keypress="doSearch"/>
3、父組件獲得輸入框中的值，通過this.$refs.組件名來獲取dom元素，多層嵌套，要調多次
// 記錄輸入框的值 this.inputValue=this.$refs.zujian1.$refs.zujian2.query
當我們需要在 JavaScript 中直接訪問子組件。
為此可以使用 ref 為子組件指定一個引用 ID
<div id="parent">
<p ref="profile" id="profile"></p>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件實例
var child = parent.$refs.profile
console.log(child )// <p ref="profile" id="profile"></p>這與document.getElementById(“profile”)獲取dom節點的作用是一樣的，但使用ref會減少獲取dom節點的消耗
當 ref 和 v-for 一起使用時，獲取到的引用會是一個數組，包含和循環數據源對應的子組件。
讀到這里，這篇“vue怎么使用refs獲取嵌套組件中的值”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
