腳本之家服務器常用軟件

快捷導航

vue中ref的用法小結

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

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

vue中ref的用法

在項目中使用ref時有時候直接取值,有時候返回的卻是一個數(shù)組,不知其中緣由,后查了一下ref用法,所以總結一下.

1.綁定在dom元素上時，用起來與id差不多，通過this.$refs來調用:

<div id="passCarEchart" ref="passCarEchart" style="height: 300px; width: 100%"></div>
console.log(this.$refs.passCarEchart)

看到打印出來就是綁定的dom對象，可以用來執(zhí)行一些dom操作，比如操作樣式，獲取屬性等:

let passCarEchart= this.$refs.passCarEchart
passCarEchart.style.height = '200px'
passCarEchart.style.background = 'red'
console.log(passCarEchart.clientHeight)

2.如果refs自身的dom，或父級的dom是通過v-for渲染出來的，vue框架就會把refInFor設置成true，然后ref.key在registerRef函數(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除了這兩個用法，還有另一種用法，綁定在組件標簽上:

<CheckPoint
        ref="checkPoint"
        v-model="checkPointNumbers"
        @clearData="clearCheckPointData"
      ></CheckPoint>

console.log(this.$refs.checkPoint)

可以看到這次和我們之前綁定在dom元素上有很大的不同，這次獲取到的是一個VueComponent對象，里面有這個組件的各個屬性，這些屬性里面有一個$el，這就是dom對象，就是和我們直接綁定在dom元素上獲取的一樣:

console.log(this.$refs.checkPoint.$el)

通過$refs獲取的對象中,我們可以看到里面還有我們設置在data里面的變量，我們是可以直接通過這種ref的方式去修改，它就等于拿到那個組件的this，可以直接調用，不僅是data里面的變量，還有methods里面的方法.

4.這種用法還可以在用ui框架的組件的時候，ui框架給我們提供了很多組件的方法，就是要通過這個ref去調用,比如說element-ui的樹形組件

例子:

<el-form ref="personDialogForm" :inline="true" class="dialog-form" :model="form" :rules="dialogRules">

這里就不多介紹用法了,一般組件庫官網(wǎng)中各自的用法.

到此這篇關于vue中ref的用法的文章就介紹到這了,更多相關vue ref用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中ref的用法小結

目錄

vue中ref的用法

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具