VUE中$refs的基本用法舉例
ref 有三種用法:
1、ref 加在普通的元素上,用this.$refs.(ref值) 獲取到的是dom元素。
2、ref 加在子組件上,用this.$refs.(ref值) 獲取到的是組件實例,可以使用組件的所有方法。
在使用方法的時候直接this.$refs.(ref值).方法() 就可以使用了。
3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點。
第一種用法舉例
<template> <div> <h2>refs</h2> <input ref="inp" type="text" /> </div> </template> <script> export default { //ref 需要在dom渲染完成后才會有,在使用的時候確保dom已經(jīng)渲染完成。比如在生命周期 mounted(){} 鉤子中調(diào)用,或者在 this.$nextTick(()=>{}) 中調(diào)用。 created() { // 在生命周期created中可以查詢到變量,但是dom還未渲染完成, 需要借助this.$nextTick(()=>{}) this.$nextTick(() => { console.log(this.$refs.inp); }); }, }; </script>
應(yīng)注意的坑:
1、如果通過v-for 遍歷想加不同的ref時記得加 :號,
即 :ref =某變量 ;這點和其他屬性一樣,如果是固定值就不需要加 :號,如果是變量記得加 :號。
(加冒號的,說明后面的是一個變量或者表達式;沒加冒號的后面就是對應(yīng)的字符串常量
(String))
2、通過 :ref =某變量 添加ref(即加了:號) ,如果想獲取該ref時需要加 [0],如
this.$refs[refsArrayItem] [0];如果不是:ref =某變量的方式而是 ref =某字符串時則不需要加,如
this.$refs[refsArrayItem]。
1、ref 需要在dom渲染完成后才會有,在使用的時候確保dom已經(jīng)渲染完成。比如在生命周期
mounted(){} 鉤子中調(diào)用,或者在 this.$nextTick(()=>{}) 中調(diào)用。
2、如果ref 是循環(huán)出來的,有多個重名,那么ref的值會是一個數(shù)組 ,此時要拿到單個的ref 只需要
循環(huán)就可以了。
擴展知識點
vue---$refs的用法【詳解】
在用VUE開發(fā)項目的時候,經(jīng)常會使用到$refs來操作DOM,那么它究竟該怎么使用呢?
首先,平時在用JS開發(fā)項目的時候,獲取DOM元素,使用的是 document.querySelector("#id") 來獲取DOM元素,并且可以操作或獲取其屬性,例如獲取 input 的 value 值。
如果是使用VUE,可以使用 ref 來進行綁定,就不需要獲取DOM節(jié)點了,然后通過 $refs 來進行操作或獲取屬性。
例如使用 JavaScript 里面通過 this.$refs.input1 去調(diào)用,這樣的做法實際上是訪問VUE虛擬出來的DOM,可以有效減少獲取/操作DOM節(jié)點的性能消耗。
示例:
<div id="app"> <input type="text" ref="input1" /> <button @click="add">添加</button> </div>
代碼:
add:function(){ // this.$refs[input1].value = "test"; // 可以用運算符去訪問 this.$refs.input1.value = "test"; // 有效減少獲取dom節(jié)點的性能消耗 }
這里的 $refs 相當(dāng)于是一個通用選擇器,然后通過 key 去訪問存儲的對象。
到此這篇關(guān)于VUE中$refs的基本用法的文章就介紹到這了,更多相關(guān)VUE中$refs用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Vue中為什么要引入render函數(shù)的實現(xiàn)
本文主要介紹了Vue中為什么要引入render函數(shù)的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vuejs 頁面的區(qū)域化與組件封裝的實現(xiàn)
本篇文章主要介紹了Vuejs 頁面的區(qū)域化與組件封裝的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue3+ts項目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運行模式,環(huán)境變量文件以.env開頭,僅VITE_前綴的變量會被暴露,開發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開發(fā)和生產(chǎn)環(huán)境2024-10-10