vue.js中ref及$refs的使用及講解


  關於ref和$refs的用法及講解,vue.js中文社區( https://cn.vuejs.org/v2/api/#ref )是這么講解的:

  

  ref 被用來給元素或子組件注冊引用信息,引用信息將會注冊在父組件的 $refs 對象上。

  如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件;

       vue.js中文社區文檔上的說明已經就比較通俗易懂了,其實我們可以這么理解,ref和$refs其實就是用來獲取/操作DOM元素的;類似於jquey中的$(".xxx");

       那么我們如何使用ref和$refs呢?

  ref可以直接加在HTML標簽上,作為一個屬性存在於HTML標簽中,如圖

       

<input title="手機號"  name="mobile" ref="mobile" placeholder="手機號" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>

 

 這樣,我們就是給input輸入框元素注冊了引用信息,那么我們如何獲取這個DOM元素呢?

 同樣,vue.js也給我們提供了特定的方法:

    

this.$refs.mobile

 

 

   

 

      上面圖片就是我們this.$refs.mobile的輸出結果 ,vue.js提供的獲取DOM元素的方法確實還是很方便呢,希望我的博客能夠幫助您更好的理解vue語法的使用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM