快捷導(dǎo)航

vue中ref的用法小結(jié)

更新時(shí)間：2023年11月16日 15:44:40 作者：小鍋蓋快跑

在項(xiàng)目中使用ref時(shí)有時(shí)候直接取值,有時(shí)候返回的卻是一個(gè)數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧

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中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題
這篇文章主要介紹了vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
基于mpvue的小程序項(xiàng)目搭建的步驟
mpvue 是美團(tuán)開(kāi)源的一套語(yǔ)法與vue.js一致的、快速開(kāi)發(fā)小程序的前端框架，這篇文章主要介紹了基于mpvue的小程序項(xiàng)目搭建的步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-05-05
vue react中的excel導(dǎo)入和導(dǎo)出功能
當(dāng)我們把信息化系統(tǒng)給用戶(hù)使用時(shí)，用戶(hù)經(jīng)常需要把以前在excel里錄入的數(shù)據(jù)導(dǎo)入的信息化系統(tǒng)里，這樣為用戶(hù)提供了很大的方便，這篇文章主要介紹了vue中或者react中的excel導(dǎo)入和導(dǎo)出,需要的朋友可以參考下
2023-09-09
Vue項(xiàng)目配置router.js流程分析講解
第一次寫(xiě)Vue項(xiàng)目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說(shuō)，先上代碼，我再講一些要注意的細(xì)節(jié)
2022-12-12
vue如何使用html2canvas和JsPDF導(dǎo)出pdf組件
這篇文章主要介紹了vue如何使用html2canvas和JsPDF導(dǎo)出pdf組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊
這篇文章主要介紹了vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue自定義插件封裝，實(shí)現(xiàn)簡(jiǎn)易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實(shí)現(xiàn)簡(jiǎn)易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11