vue中ref的用法小結(jié)
vue中ref的用法
在項(xiàng)目中使用ref時(shí)有時(shí)候直接取值,有時(shí)候返回的卻是一個(gè)數(shù)組,不知其中緣由,后查了一下ref用法,所以總結(jié)一下.
1.綁定在dom元素上時(shí)，用起來(lái)與id差不多，通過(guò)this.$refs來(lái)調(diào)用:
<div id="passCarEchart" ref="passCarEchart" style="height: 300px; width: 100%"></div> console.log(this.$refs.passCarEchart)
看到打印出來(lái)就是綁定的dom對(duì)象，可以用來(lái)執(zhí)行一些dom操作，比如操作樣式，獲取屬性等:
let passCarEchart= this.$refs.passCarEchart passCarEchart.style.height = '200px' passCarEchart.style.background = 'red' console.log(passCarEchart.clientHeight)
2.如果refs自身的dom，或父級(jí)的dom是通過(guò)v-for渲染出來(lái)的，vue框架就會(huì)把refInFor設(shè)置成true，然后ref.key在registerRef函數(shù)就被設(shè)置成數(shù)組
<div
v-for="item in csGroupNameArr"
:key="item"
>
<div ref="arrayDiv">
{{ item }}
</div>
</div>this.$nextTick(() => {
console.log(this.$refs.arrayDiv,'arrayDiv')
})
3.ref除了這兩個(gè)用法，還有另一種用法，綁定在組件標(biāo)簽上:
<CheckPoint
ref="checkPoint"
v-model="checkPointNumbers"
@clearData="clearCheckPointData"
></CheckPoint>console.log(this.$refs.checkPoint)
可以看到這次和我們之前綁定在dom元素上有很大的不同，這次獲取到的是一個(gè)VueComponent對(duì)象，里面有這個(gè)組件的各個(gè)屬性，這些屬性里面有一個(gè)$el，這就是dom對(duì)象，就是和我們直接綁定在dom元素上獲取的一樣:
console.log(this.$refs.checkPoint.$el)
通過(guò)$refs獲取的對(duì)象中,我們可以看到里面還有我們?cè)O(shè)置在data里面的變量，我們是可以直接通過(guò)這種ref的方式去修改，它就等于拿到那個(gè)組件的this，可以直接調(diào)用，不僅是data里面的變量，還有methods里面的方法.
4.這種用法還可以在用ui框架的組件的時(shí)候，ui框架給我們提供了很多組件的方法，就是要通過(guò)這個(gè)ref去調(diào)用,比如說(shuō)element-ui的樹(shù)形組件
例子:
<el-form ref="personDialogForm" :inline="true" class="dialog-form" :model="form" :rules="dialogRules">
這里就不多介紹用法了,一般組件庫(kù)官網(wǎng)中各自的用法.
到此這篇關(guān)于vue中ref的用法的文章就介紹到這了,更多相關(guān)vue ref用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
這篇文章主要介紹了詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目 ,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了基于vue如何發(fā)布一個(gè)npm包的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
基于vue3實(shí)現(xiàn)一個(gè)抽獎(jiǎng)小項(xiàng)目
在公司年會(huì)期間我做了個(gè)抽獎(jiǎng)小項(xiàng)目，非常棒，今天把他分享到腳本之家平臺(tái)，供大家學(xué)習(xí)參考，對(duì)vue3實(shí)現(xiàn)抽獎(jiǎng)小項(xiàng)目感興趣的朋友一起看看吧2023-01-01
這篇文章主要介紹了vue引入ueditor及node后臺(tái)配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
在寫(xiě)業(yè)務(wù)的時(shí)候很常見(jiàn)的一個(gè)場(chǎng)景就是需要在不同的頁(yè)面調(diào)用同一個(gè)表單，常用的交互就是把表單以彈窗的形式展示，本文主要介紹了Vue實(shí)現(xiàn)Dialog封裝，感興趣的可以了解一下2021-07-07
vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下2022-05-05
elementUI select組件value值注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件value值注意事項(xiàng)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Vue.js中使用Vuex但未正確配置Store問(wèn)題以及解決過(guò)程
這篇文章主要介紹了Vue.js中使用Vuex但未正確配置Store問(wèn)題以及解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05