vue中ref引用操作DOM元素的實(shí)現(xiàn)
前言
在javascript中，我們用原生的方式獲取頁面中的DOM元素，并操作它們。后來，有了jquery，jquery的強(qiáng)大就在于它可以很方便的操作DOM元素。
在vue中，如何操作DOM元素呢？
首先，在vue中強(qiáng)烈禁用原生與jquery來操作DOM元素。我們要充分的利用vue的優(yōu)勢：MVVM，在vue中程序員幾乎不操作DOM，只需要維護(hù)好數(shù)據(jù)即可，vue給程序員提供ref引用，不調(diào)用api直接獲取元素組件的使用
一，$refs對象介紹及基本用法
refs對象的介紹：在每個vue的組件實(shí)例上，都包含一個 r e f 對象 = = 存儲著對應(yīng)的 = = D O M 元素 = = 或 = = 組件 = = 的引用， = = 默認(rèn)情況下，組件的 ref對象==存儲著對應(yīng)的==DOM元素==或==組件==的引用，==默認(rèn)情況下，組件的 ref對象==存儲著對應(yīng)的==DOM元素==或==組件==的引用，==默認(rèn)情況下，組件的refs指向一個空對象，凡是以$開頭的，都是vue的內(nèi)置對象
基礎(chǔ)使用方法（獲取DOM元素）：比如我們要獲取h1,則我們給它取一個名字并放入ref中，代碼如下：
<h1 ref="myh1">App 根組件</h1>
在引用時，只需在js中：
this.$refs.myh1.style.color = "red";
既可以成功操作：
我們來看看現(xiàn)在的refs中是不是多了myh1這一個成員：
總結(jié)一下：vue中有一個$refs對象，默認(rèn)為空。當(dāng)我們在DOM元素中為其設(shè)置ref值后，相當(dāng)于在vue的內(nèi)置對象 $refs中添加了新的成員，我們?nèi)绻枰僮鱀OM對象直接通過 $refs獲取即可。
二，使用ref引用組件實(shí)例
ref除了可以引入DOM元素，還可以引入組件。可以拿到組件并操控里面的方法與數(shù)據(jù)
大家請看left組件結(jié)構(gòu)
<template>
<div class="left-container">
<h3>left組件------{{ count }}</h3>
<button @click="count += 1">+1</button>
<button @click="resetCount">重置</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
resetCount() {
this.count = 0;
}
}
}
</script>
<style>
.left-container {
height: 200px;
background-color: orange;
}
</style>
在我將Left組件導(dǎo)入到App.vue后，我想在App組件中操作Left組件中的元素，比如，我想重置Left組件的count值為0：
首先，與操作DOM元素一樣，我要先給Left組件一個ref值：
<Left ref="comLeft"></Left>
在添加ref后，我們再去觀察$refs，多了成員comLeft：
接著，我再設(shè)置一個按鈕，要求按鈕按下后，重置Left組件中的count值為0：
<button @click="onReset">重置Left組件的count值為0</button>
然后設(shè)置onReset函數(shù)：（用到$refs中的comLeft）
onReset() {
this.$refs.comLeft.resetCount();
}
三，ref的使用案例
3.1 案例需求
案例需求：實(shí)現(xiàn)按鈕和文本框的按需展示：
有輸入框->看不到按鈕；
有按鈕->看不到輸入框。
3.2 思路與做法
首先寫出結(jié)構(gòu)，一個輸入框與一個按鈕。點(diǎn)擊按鈕時，按鈕消失，輸入框失去焦點(diǎn)，輸入框消失：
通過上述分析，我們可以知道大的方向是要有一個布爾值，默認(rèn)如果布爾值為false，則默認(rèn)展示按鈕隱藏輸入框，否則（true）展示輸入框隱藏按鈕。
需要用到的知識：
用@click=“”綁定點(diǎn)擊事件；v-if與v-show控制元素是否顯示（動態(tài)的添加與刪除元素）；使用ref綁定輸入框，并使用輸入框的focus來控制輸入框的焦點(diǎn)。
代碼如下：
<!-- 小demo -->
<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
<button v-else @click="showInput">展示輸入框</button>
data() {
return {
//控制輸入框和按鈕的按需切換，默認(rèn)值為false表示默認(rèn)展示按鈕隱藏輸入框
inputVisible: false
}
},
methods: {
showThis() {
console.log(this);
console.log(this.$refs.myh1);
console.log(this.$refs.comLeft);
this.$refs.myh1.style.color = "red";
},
onReset() {
console.log(this.$refs);
this.$refs.comLeft.resetCount();
},
showInput() {
//切換布爾值，把文本框展示出來
this.inputVisible = true;
//讓展示出來的文本框自動獲取焦點(diǎn)
this.$refs.iptRef.focus();
},
showButton() {
this.inputVisible = false;
}
},
請自行編譯上述代碼會發(fā)現(xiàn)問題：雖然showInput提供方法讓展示出來的文本框自動獲得焦點(diǎn)，但是在頁面中卻無法實(shí)現(xiàn)。
3.2 為什么頁面上無法自動獲得焦點(diǎn)
因?yàn)楫?dāng)布爾值變成true的時候，頁面還沒來得及更新，這里就跟聲明周期有關(guān)系了，js是單線程，從上往下渲染，布爾值變成true，還是一個將要展示，還沒有展示的狀態(tài)，所以在頁面中渲染不出來：
解決方法是：保證頁面先更新完再執(zhí)行這個操作，延遲this.$refs.iptRef.focus()的使用在這里插入代碼片
如何延遲？我們能不能把這個操作放在updated中？==答案是不能，因?yàn)橛|發(fā)updated的條件是，只要數(shù)據(jù)發(fā)生變化就可以觸發(fā)。所以，當(dāng)this.inputVisible發(fā)生變化，就會觸發(fā)事件。（updated：數(shù)據(jù)更新后，完成虛擬DOM的重新渲染和打補(bǔ)丁。組件DOM已完成更新，可執(zhí)行依賴的DOM操作。注意：不要在此函數(shù)中操作數(shù)據(jù)（修改屬性），會陷入死循環(huán)）
那么，有什么更好的解決方法呢？
3.3 this.$nextTick(cb)
組件的this.$nextTick(cb)方法，會把cb回調(diào)推遲到下一個DOM更新周期之后執(zhí)行
理解：等組件DOM更新完成后，再執(zhí)行cb回調(diào)函數(shù)，從而保證cb回調(diào)可操作最新的DOM元素
用法：在括號中(cb回調(diào)函數(shù))放入箭頭函數(shù)并執(zhí)行操作
showInput() {
//切換布爾值，把文本框展示出來
this.inputVisible = true;
//讓展示出來的文本框自動獲取焦點(diǎn)
// this.$refs.iptRef.focus();
this.$nextTick(() => {
this.$refs.iptRef.focus();
})
}
3.4 整體代碼
<template>
<div class="app-container">
<h1 ref="myh1">App 根組件</h1>
<button @click="showThis">打印 this</button>
<button @click="onReset">重置Left組件的count值為0</button>
<hr />
<!-- 小demo -->
<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
<button v-else @click="showInput">展示輸入框</button>
<!-- 渲染Left組件 -->
<div class="box">
<Left ref="comLeft"></Left>
</div>
</div>
</template>
<script>
import Left from "./components/Left.vue";
// console.log($refs);
export default {
data() {
return {
//控制輸入框和按鈕的按需切換，默認(rèn)值為false表示默認(rèn)展示按鈕隱藏輸入框
inputVisible: false
}
},
methods: {
showThis() {
console.log(this);
console.log(this.$refs.myh1);
console.log(this.$refs.comLeft);
this.$refs.myh1.style.color = "red";
},
onReset() {
console.log(this.$refs);
this.$refs.comLeft.resetCount();
},
showInput() {
//切換布爾值，把文本框展示出來
this.inputVisible = true;
//讓展示出來的文本框自動獲取焦點(diǎn)
// this.$refs.iptRef.focus();
this.$nextTick(() => {
this.$refs.iptRef.focus();
})
},
showButton() {
this.inputVisible = false;
}
},
components: {
Left,
},
// updated() {
// this.$refs.iptRef.focus();
// }錯誤，只要數(shù)據(jù)變化，就會觸發(fā)updated
};
</script>
<style>
</style>
四，總結(jié)
看完這節(jié)知識相信已經(jīng)學(xué)會了如何操作頁面中的DOM元素與組件，并知曉了在頁面DOM元素更新完后如何操作元素的方法與原理。
到此這篇關(guān)于vue中ref引用操作DOM元素的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue ref引用操作DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時對其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友一起看看吧2023-09-09
VUE+Java實(shí)現(xiàn)評論回復(fù)功能
這篇文章主要為大家詳細(xì)介紹了VUE+Java實(shí)現(xiàn)評論回復(fù)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue實(shí)現(xiàn)滾動鼠標(biāo)滾輪切換頁面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動鼠標(biāo)滾輪切換頁面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue下的@change事件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要為大家介紹了Vue3源碼解析watch函數(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue通過滾動行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法
今天小編就為大家分享一篇vue通過滾動行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08